Custom Navigation

Posted by Community Admin on 30-Nov-2010 00:00

Hi,

I am testing out the Custom Navigation option when using the Navigation control in Sitefinity 4 RC. In my master page I have the following for my main site navigation:

<div id="nav">

<asp:ContentPlaceHolder id="Nav" runat="server"></asp:ContentPlaceHolder>

</div>

The styling for the navigation control is being rendered according to the CSS rules used in my theme for the nav id selector. When I viewed the source in the browser for the page, I notice that Sitefinity 4 renders the Custom Navigation as RadSiteMap.

How would I style the link for the current page when using the Custom Navigation control? For example, when at the home page, I would like the Home link in the site navigation to be styled differently than the other links.

Thank You,
Carla

Posted by Community Admin on 30-Nov-2010 00:00

Hello carlag,

You can take a look at this post that shows how to apply a custom style to a given node

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

Posted by Community Admin on 30-Nov-2010 00:00

Hi,

I have created a user control with the following:

UserControl MarkUp:

<%

@ Control Language="C#" AutoEventWireup="true" CodeFile="Navigation.ascx.cs" Inherits="Custom_Navigation" %>

<

telerik:RadSiteMap ID="RadSiteMap1" runat="server"></telerik:RadSiteMap>

In the code behind of my user control, I have this:

public

partial class Custom_Navigation : System.Web.UI.UserControl

protected void Page_Load(object sender, EventArgs e)

this.RadSiteMap1.NodeDataBound += new Telerik.Web.UI.RadSiteMapNodeEventHandler(RadSiteMap1_NodeDataBound);

protected void RadSiteMap1_NodeDataBound(object sender, Telerik.Web.UI.RadSiteMapNodeEventArgs e)

SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;

SiteMapNode sitemapNode = e.Node.DataItem as SiteMapNode;

//e.Node.ToolTip = Page.ResolveUrl(currentNode.Url) + " - " + Page.ResolveUrl(sitemapNode.Url);

if (currentNode != null)

if (Page.ResolveUrl(sitemapNode.Url) == Page.ResolveUrl(currentNode.Url))

e.Node.Selected =

true;

e.Node.SelectedCssClass =

"testcurrent";

Under the advanced tab of the designer in Sitefinity I set the template path to my usercontrol, but I still do not see my CSS class rule being rendered for the current link. Is this the correct code to highlight the current page link when using the RadSiteMap?

Thanks,
Carla

Posted by Community Admin on 30-Nov-2010 00:00

Hello carlag,

Below is a sample code

<asp:SiteMapDataSource runat="server" ID="SiteMapDataSource1" ShowStartingNode="false" />

<telerik:RadSiteMap runat="server" ID="RadSiteMap1" DataSourceID="SiteMapDataSource1" ></telerik:RadSiteMap>

RadSiteMap1.DataBind();

var selected = this.RadSiteMap1.SelectedNode;

if (selected.Text == "sometext")

selected.CssClass = "red";

You do not need to use NodeDataBound event.

Kind regards,
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

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

HI,

I have tried the provided code sample, however, I am still not able to highlight the link for the current page.

I have the following in the user control markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Navigation.ascx.cs" Inherits="Custom_Navigation" %>

<asp:SiteMapDataSource runat="server" ID="SiteMapDataSource1" ShowStartingNode="false"/>

<telerik:RadSiteMap runat="server" ID="RadSiteMap1"></telerik:RadSiteMap>

I put this code in the Page_Load event of the user control:

public partial class Custom_Navigation : System.Web.UI.UserControl

protected void Page_Load(object sender, EventArgs e)

RadSiteMap1.DataBind();

SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;

var selected = this.RadSiteMap1.SelectedNode;

if (Page.ResolveUrl(selected.NavigateUrl) == Page.ResolveUrl(currentNode.Url))

selected.CssClass = "testcurrent";

I rebuilt the web project in Visual Studio and set the template path for CustomTemplateCustomNavigation to the user control. When I view my home page, I get "Object reference not set to an instance of an object." for the selectedNode.

Is there something else I need to do to get this to work?

Thanks,
Carla

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

Hello carlag,

Could you check whether the are any nodes added to the RadSiteMap by using GetAllNodes() method or Nodes property.

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

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

Hi,

I have checked if there are any nodes added to RadSiteMap with this code in the user control (template):

public partial class Custom_Navigation : System.Web.UI.UserControl

protected void Page_Load(object sender, EventArgs e)

RadSiteMap1.DataBind();

SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;

var selected = this.RadSiteMap1.SelectedNode;

int count = RadSiteMap1.GetAllNodes().Count;

Response.Write(count.ToString() + "</br>");

foreach (RadSiteMapNode node in RadSiteMap1.GetAllNodes())

node.ToolTip = "This is tool tip text";

node.CssClass = "testcurrent";

Response.Write(node.Value.ToString() + "</br>" + Page.ResolveUrl(node.NavigateUrl).ToString() + "</br>" + node.Selected.ToString() + "</br>");

The node properties (count, value, navigateurl, and selected (this value is false for all nodes)) are being printed to the page, so there are nodes. However, the CssClass and ToolTip declarations are not being applied and when I tried to print or access the SelectedNode I got "Object reference not set to an instance of an object."

Thank You

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

Here is what i have figured out in order to get the similar funcationality i had with the 3.7 sitemenu control to work in 4.0. For my main menu i only want to show the top level pages (Which is why maxdatabinddepth =1) and i also don't want to show a link to the home page which is why in the code behind i remove the first node in the prerender. Also since my menu doesn't show any submenus whenver a user is on a sub page i still want to highlight the parent menu node which is done by the while loop in the itemdatabound.

I made a new user control

the ascx looks like this

<telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SiteMap" OnItemDataBound="RadMenu1_ItemDataBound" Width="100%" EnableEmbeddedSkins="false" Skin="MySkin" MaxDataBindDepth="1" >

</telerik:RadMenu>

<asp:SiteMapDataSource runat="server" ID="SiteMap" StartFromCurrentNode="false" ShowStartingNode="false" StartingNodeOffset="0" />

the codebehind is

using Telerik.Sitefinity.Web;

using Telerik.Web.UI;

namespace SitefinityWebApp.Controls

public partial class SiteMenu : System.Web.UI.UserControl

protected void Page_Load(object sender, EventArgs e)

protected override void OnPreRender(EventArgs e)

base.OnPreRender(e);

RadMenu1.DataBind();

RadMenu1.Items[0].Remove();

public void RadMenu1_ItemDataBound(object sender, RadMenuEventArgs e)

SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;

while (currentNode != null && currentNode.ParentNode != null)

if (currentNode.ParentNode.Title != currentNode.RootNode.Title)

currentNode = currentNode.ParentNode;

else

break;

if (currentNode != null)

RadMenuItem item = this.RadMenu1.FindItemByUrl(this.ResolveUrl(currentNode.Url));

if (item != null)

item.Selected = true;

item.SelectedCssClass = "rmFocused";

the next thing you need to do is register the control by following this guide
www.sitefinity.com/.../controls-adding-a-new-control.html

Then edit your page template and drab your new control onto it. Don't use the built in sitefinity navigation control and then use it as a custom template. I found that way didn't work correctly cause it tried to bind the sitemap datasource twice and also the javascript and clientside events i needed to use(not shown here) didn't work correctly.

This thread is closed

All Replies