Treeview Focus?

Posted by: jhgarniss on 10 September 2017, 11:39 am EST

  • Posted 10 September 2017, 11:39 am EST

    Hi all,

    I have a treeview inside of a navpanel pane that works great. I have been able to make sure that the current selected node of the treeview gets highlighted and the appropriate upper node remains open without a problem.

    However, I have a few very large trees where the value needs to be scrolled to inside the navpanel.

    How do I not only set the selected tree node (as I am doing already) but also make sure that the selected tree node is displayed after they clcik on it so they don't have to scroll back down the navpanel to see it highlighted?
  • Replied 10 September 2017, 11:39 am EST

    Hi Abdias,

    Essentially this is how I am doing it. There are more levels available, but they follow the same logic. I use a placeholder in the webcontrol to generate the treeview. I create the treeviewnode, assign the values, and if the data indicates a submenu, I don't add the link. If it doesn't have a submenu, I create the link and check the session variables to determine which treenode I'm on. When I run this, the treeview node I clicked on is always highlighted.


    try
    {
    C1TreeViewNode c1TVIT = new C1TreeViewNode();
    c1TVIT.Text = MySQLDR["title"].ToString();
    c1TVIT.Value = MySQLDR["idchp_intranet_menu_hdr"].ToString();
    c1TVIT.Expanded = false;
    c1TVIT.ToolTip = MySQLDR["description"].ToString();
    // a zero level indicates that you should create the link immediately and just add the control.
    if (MySQLDR["SubMenus"].ToString() == "0")
    {
    c1TVIT.NavigateUrl = "~/Display.aspx?FID=" + MySQLDR["idchp_intranet_menu_hdr"].ToString();
    try
    {
    if (Session["PageSource"].ToString() == "IT")
    {
    try
    {
    if (Session["SelectedMenuItem"].ToString() == MySQLDR["idchp_intranet_menu_hdr"].ToString())
    {
    c1TVIT.Selected = true;
    }
    }
    catch (System.Exception ex)
    {

    }
    }
    else
    c1TVIT.Selected = false;
    }
    catch (System.Exception ex)
    {

    }
    }
    ITMenu.Nodes.Add(c1TVIT);
    catch (System.Exception ex)
    {

    }

  • Replied 10 September 2017, 11:39 am EST

    Also, is it possible to have the NavigateURL open in a new window? Right now I am having it open in an iframe on a page, but am wondering if in some cases it's possible to open to an entirely new window?
  • Replied 10 September 2017, 11:39 am EST

    Hi,

    Scrolling the NavPanel through code is possible only through javascript.
    First of all, you'll have to find the Node saved in the session variable from the C1TreeView. If it's not the first child Node of the treeview, you'll have to traverse through the child nodes to find it and then set it's selected property to true.

    if (Session["SelectedNode"] != null)
    {
    string val = Session["SelectedNode"].ToString();
    if (val != "")
    {
    C1TreeViewNode selNode = C1TreeView1.Nodes.FindNodeByValue(val);
    if (selNode != null)
    {
    selNode.Selected = true;
    HiddenField1.Value = selNode.Text;
    }
    else
    {
    findTreeViewNode(val);
    }
    }
    }

    Once this is done, to scroll the navpanel to the location so that the selected node is visible, we'll find the TopOffset of the node and then use the scrollTop method to scroll the Navpanel.

    <script type="text/javascript">

    Sys.Application.add_load(function () {

    var treeview = $find('<%=C1TreeView1.ClientID %>');
    var hidden = document.getElementById("HiddenField1").value;
    var node = treeview.findNodeByText(hidden);
    var navpanel = $find('<%=C1NavPanel1.ClientID %>');
    if (node != null) {
    var scrollValue = node.element.offsetTop;
    if (scrollValue != null) {
    $("div.C1Content").scrollTop(scrollValue);
    }
    }
    });
    </script>


    C1Content is the class name of the C1NavPanel's pane which contains the C1TreeView.

    Have a look at the attached sample for the complete implementation.

    Regards
    Abdias
    2011/07/C1TreeView_Select_ScrollC1NavPanel.zip
  • Replied 10 September 2017, 11:39 am EST

    Hi,

    I would like to know how you're selecting the nodes.
    Could you please upload your sample here so I can take a look at it and find a solution for you?


    Regards
    Abdias
  • Replied 10 September 2017, 11:39 am EST

    Hi Abdias,

    That's not going to work in the context that I'm using. The navpanel is in one web control. The individual treeviews for each panel are in their own webcontrols that are referenced within the content of the navpanel. Plus the treeview is being created in the codebehind, so I get an error in the javascript stating that the treeview doesn't exist when I try to compile (var treeview = $find('<%=C1TreeView1.ClientID %>');)

    I'll work with your code to see if I can incorporate what you've done in the code behind and make it work.

    Thanks,
    Jon
  • Replied 10 September 2017, 11:39 am EST

    Hi Jon,

    Let me know if you're able to find a workaround using my sample.
    If not, please send me your sample with the webcontrols and I'll look into it.

    Regards
    Abdias
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels