Navigation Control - VerticalTree with rollover - Sitefinity - General Discussions

Posted by Community Admin on 10-Dec-2010 00:00

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.

Posted by Community Admin on 11-Dec-2010 00:00

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

Posted by Community Admin on 13-Dec-2010 00:00

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.

Posted by Community Admin on 14-Dec-2010 00:00

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

This thread is closed

Navigation Control - VerticalTree with rollover

All Replies