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

Forums / General Discussions / Navigation Control - VerticalTree with rollover

Navigation Control - VerticalTree with rollover

4 posts, 1 answered
  1. JV
    JV avatar
    74 posts
    Registered:
    15 Jun 2012
    10 Dec 2010
    Link to this post
    Hi,

    I need to be able to put the VerticalTree menu to expand in rollover and not by clicking in the "expand/colapse" image.
    Is that possible usign the NavigationControl that comes with sitefinity or i have to build a new one?
    I need help to know what is the best way to achieve this.
    Thanks.
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    11 Dec 2010
    Link to this post
    Hi JV,

    Thank you for using our services.

    This can be achieved by providing an external template for the navigation control and handle the opening using java script. The Tree View mode of the Navigation control uses RadTreeView for ASP.NET AJAX. Here is what you have to do.

    1) Create an .ascx file in the root of your website and add the bellow markup:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <navcontrols:SiteMapNavigationTreeView ID="TreeNavigation" runat="server" OnClientMouseOver="OnClientMouseOver">
    </navcontrols:SiteMapNavigationTreeView>
    <script type="text/javascript">
        function OnClientMouseOver(sender, args) {
            var node = args.get_node();
            node.toggle();
        }
    </script>

    2) Go to your navigation control, choose tree mode and set the external template, as in attached image.

    All the best,
    Radoslav Georgiev
    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. JV
    JV avatar
    74 posts
    Registered:
    15 Jun 2012
    13 Dec 2010
    Link to this post
    Hi,

    It worked, but now i have other problems.

    Problem 1 - i want to collapse all node is the loose focus of the tree - if user leaves de menu area all nodes should collapse again.

    Problem 2 - I have  AllowCollapsing="true" ShowExpanded="False" but the menu appears expanded.

     This is the controlnavigation declaration in my master page :

    <sfNav:NavigationControl id="LeftMenu" runat="server" MaxDataBindDepth="3"  SelectionMode="SelectedPageChildren"  NavigationAction="OnClick" NavigationMode="VerticalTree"
                            CustomTemplateVerticalTree="~//NavigationControl.ascx" AllowCollapsing="true"  ShowExpanded="False"
                            ></sfNav:NavigationControl

    How can i force the menu to appears all collapsed ?

    Problem 3 -  in my custom navigation control i'm trying to select and expand only the current node (current page). My code :

     protected void TreeNavigation_OnNodeDataBound(object sender, RadTreeNodeEventArgs e)
            {
                SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;
                string selectedurl = currentNode.Url;
                if (e.Node.NavigateUrl.Equals(currentNode.Url))
                {
                    e.Node.Selected = true;
                    e.Node.Parent.Expanded = true;
                }
            }

    But nothing happens ?


    Can you help me ?

    Thanks again.
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    14 Dec 2010
    Link to this post
    Hello JV,

    You can try using the standard Navigation control with the bellow custom template. You should set the navigation tree as in attached image from my first reply:
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
        <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" ScriptType="jQuery"></sf:JavaScriptEmbedControl>
    <script runat="server" type="text/C#">
        private string currentNodeUrl;
        protected void Page_Load()
        {
            TreeNavigation.NodeDataBound += new RadTreeViewEventHandler(TreeNavigation_NodeDataBound);
            SiteMapNode currentNode = Telerik.Sitefinity.Web.SiteMapBase.GetCurrentProvider().CurrentNode;
            currentNodeUrl = currentNode.Url;
        }
     
        void TreeNavigation_NodeDataBound(object sender, RadTreeNodeEventArgs e)
        {
     
            if (e.Node.NavigateUrl.Equals(currentNodeUrl))
            {
                e.Node.Selected = true;
                e.Node.ExpandParentNodes();
                e.Node.Expanded = true;
                e.Node.ExpandChildNodes();
            }
        }
    </script>
    <div id="treeArea">
    <navcontrols:SiteMapNavigationTreeView ID="TreeNavigation" runat="server" OnClientMouseOver="OnClientMouseOver">
    </navcontrols:SiteMapNavigationTreeView></div>
    <script type="text/javascript">
        function OnClientMouseOver(sender, args) {
            var node = args.get_node();
            node.toggle();
        }
        $('#treeArea').mouseleave(function () {
            var tree = $find("<%= TreeNavigation.ClientID %>");
            var expanded = tree.get_expandedIndexes();
            for (var i in expanded) {
                tree.get_nodes().getNode(i).collapse();
            }
        })
    </script>


    Kind regards,
    Radoslav Georgiev
    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
    Answered
4 posts, 1 answered