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

Forums / General Discussions / Custom Navigation

Custom Navigation

8 posts, 0 answered
  1. carlag
    carlag avatar
    11 posts
    Registered:
    27 Jul 2006
    30 Nov 2010
    Link to this post
    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

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    30 Nov 2010
    Link to this post
    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
  3. carlag
    carlag avatar
    11 posts
    Registered:
    27 Jul 2006
    30 Nov 2010
    Link to this post
    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
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    30 Nov 2010
    Link to this post
    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
  5. carlag
    carlag avatar
    11 posts
    Registered:
    27 Jul 2006
    01 Dec 2010
    Link to this post
    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
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    02 Dec 2010
    Link to this post
    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
  7. carlag
    carlag avatar
    11 posts
    Registered:
    27 Jul 2006
    02 Dec 2010
    Link to this post
    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
  8. Michael
    Michael avatar
    59 posts
    Registered:
    02 Nov 2010
    02 Dec 2010
    Link to this post
    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
    http://www.sitefinity.com/40/help/developer-manual/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.
8 posts, 0 answered