+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Treeview highlighting current page

Treeview highlighting current page

11 posts, 0 answered
  1. Jiro Feingold
    Jiro Feingold avatar
    5 posts
    Registered:
    12 Feb 2010
    10 Jun 2010
    Link to this post
    I'm using a treeview to show side navigation (2nd level an below).  I am seeing all of the entries and have styled them correctly.  The problem I'm having is getting the current "page" hightlighted when viewing a 3rd or 4th level page.  It seems like the top entry (the 2nd level page which is the parent) is in a div which has a class rtSelected.  Unfortunately all of the third and fourth level items under it are in a UL that is outside the div.  Furthermore, the specific LI which contains the item that is the current page isn't tagged in any way.

    Is there any way to easily tag the current page in the treeview with a style?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Jun 2010
    Link to this post
    Hello Jiro Feingold,

    You could see this behavior if you use page of type - Group. In this case the Group page redirects to its first child but the child does not get selected.
    Anyway, you can get the current page from the URl and pass it to the RadTreeView control, find the node by text and then select the node as selected.

    function pageLoad() {
        var tree = $find("<%= RadTreeview1.ClientID %>");
        if (tree) {
            var location = window.location.pathname;
            location = location.substring(location.lastIndexOf('/') + 1);
            var nodeText = location.split('.');
            var currentNode = tree.findNodeByText(nodeText[0]);
            if (currentNode) {
                currentNode.set_selected(true);
            }
        }
    }


    Greetings,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Jiro Feingold
    Jiro Feingold avatar
    5 posts
    Registered:
    12 Feb 2010
    12 Jul 2010
    Link to this post
    On which page would I put this code?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    12 Jul 2010
    Link to this post
    Hi Jiro Feingold,

    On the page/control where you have declared RadTreeView control. As you can see from the js code it is finding  RadTreeNode from the url using window.location and findnodebytext. There is variable tree that is looking for a RadTreeView control with ID RadTreeview1

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Jiro Feingold
    Jiro Feingold avatar
    5 posts
    Registered:
    12 Feb 2010
    12 Jul 2010
    Link to this post
    It doesn't seem to be getting the id the var tree = $find("<%= RadTreeview1.ClientID %>"); returns null
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    12 Jul 2010
    Link to this post
    Hello Jiro Feingold,

    Please refer to RadTreeView client side programming. The code above was verified in Sitefinity environment.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Jiro Feingold
    Jiro Feingold avatar
    5 posts
    Registered:
    12 Feb 2010
    12 Jul 2010
    Link to this post
    It seemed like it didn't like it when it was in a separate js include file.

    If I put the code in the SiteTreeView.ascx file, how do I call it?  It seems it should be run after the control is loaded.

    I tried in the .ascx page:

        <script type="text/javascript">
            function pageLoad()
                var tree = $find("<%= RadTreeview1.ClientID %>");
                if (tree) {
                    var location = window.location.pathname;
                    location = location.substring(location.lastIndexOf('/') + 1);
                    var nodeText = location.split('.');
                    var currentNode = tree.findNodeByText(nodeText[0]);
                    if (currentNode) {
                        currentNode.set_selected(true);
                    }
                }
            } 
            pageLoad();
    </script>
  8. Jiro Feingold
    Jiro Feingold avatar
    5 posts
    Registered:
    12 Feb 2010
    12 Jul 2010
    Link to this post
    Sorry, figured it out.

    The one change I had to make to the code was to strip out _'s which seemed to have replaced spaces.  So one line changes to:

    var currentNode = tree.findNodeByText(nodeText[0].replace("_", " "));
  9. Ted
    Ted avatar
    28 posts
    Registered:
    08 Jan 2008
    03 Oct 2010
    Link to this post
    I am unable to get this to work.  what I have is a SiteTreeView that has the following code.  I think my issue is that my URL and the page menu are different as my currentNode is always null.  is there a way to Link them up if the menu text and the URL text is different?

    function treeExpandAllNodes() {
            var treeView = $find("<%= RadTreeview1.ClientID %>");
            var nodes = treeView.get_allNodes();        
      
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].get_nodes() != null) {
                    nodes[i].expand();
                }
            }
        }
      
        function pageLoad() {
            var tree = $find("<%= RadTreeview1.ClientID %>");
            if (tree) {
                var location = window.location.pathname;
                location = location.substring(location.lastIndexOf('/') + 1);
                var nodeText = location.split('.');
                var currentNode = tree.findNodeByText(nodeText[0].replace("_", " "));
                alert(nodeText[0]);
                //alert(currentNode.toString());
                if (currentNode) {
                    currentNode.set_selected(true);
                }
            }
        }
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Oct 2010
    Link to this post
    Hello Ted,

    nodeText  gets the current page by text, but you can use findNodeByUrl method to get the current node by url which is the page name.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Ted
    Ted avatar
    28 posts
    Registered:
    08 Jan 2008
    04 Oct 2010
    Link to this post
    Thanks, that worked.  just had to change my code to this.
    function pageLoad() {
            var tree = $find("<%= RadTreeview1.ClientID %>");
            if (tree) {
                var location = window.location.pathname;
                location = location.substring(location.lastIndexOf('/') + 1);
                var currentNode = tree.findNodeByUrl(location);
                if (currentNode) {
                    currentNode.set_selected(true);
                }
            }
        }
Register for webinar
11 posts, 0 answered