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

Forums / Designing with Sitefinity / How to add separator in sitemenu when generating it from sitemapdatasource

How to add separator in sitemenu when generating it from sitemapdatasource

8 posts, 0 answered
  1. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    09 Dec 2008
    Link to this post
    Hi i have a horizontal sitemenu control i want a separator after each menu item how can i insert this separator only on the first level not on every level also i am not doing any hardcoding inside the sitemenu its automatically deriving everything by itself from the sitemenu.
    I think i have to hook up something to Navigation35 Sitemenu.ascx.cs file
    Please help
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    09 Dec 2008
    Link to this post
    Hi Aashish Gupta,

    A possible solution is to modify Sitefinity Site Menu control (~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx) and implement the required functionality in RadMenu1_ItemDataBound method like this:

    .ascx.cs
    public void RadMenu1_ItemDataBound(object sender, RadMenuEventArgs e) 
        { 
            if (e.Item.Level == 0) 
            { 
                RadMenuItem separator = new RadMenuItem(); 
                separator.IsSeparator = true
                separator.Text = "|"
                e.Item.Owner.Items.Insert(e.Item.Index + 1, separator); 
            } 
     
            ... 
        } 

    Actually, the best approach is to make a copy of Sitefinity Site Menu and change the copy instead of the original. Thus, you will avoid loosing the changes in case of upgrade. After that you should register the newly created control in <toolboxControls> section of the web.config file to display it in Add Controls toolbox.

    Do let us know if this helps.

    All the best,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    09 Dec 2008
    Link to this post
    Thanks
    I am using a image so i used the imageurl property for that but the thing is its inserting that separator from the right border but i want it to start from the left border,ie i want the separator to start just before the first item and continue the same until the last item in the top navigation bar.
    Rest everything is working fine.Just please tell how to make that separator start from the left insetead of right side.
    Thanks
  4. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    10 Dec 2008
    Link to this post
    There are 2 problems one with sitemenu separator another with sitepanelbar top or root.Here is the image describing the problems
    Sitemenu And SitePanelbar
    Problem with sitemenu separator is as i have already mentioned its not starting from the left its starts from the right.
    And another problem is i have styled whole of the sitepanel bar as required but i am unable to style the root i want only to style the topmost node,whats happening is if i style the topmost or root node it applies to each and every top node not only to the first one i have tried rpFirst its that i am missing something.
    Thanks for replies
  5. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    11 Dec 2008
    Link to this post
    Hi can please any telerik member reply this one its really urgent.
    Please look at the above images and please solve my query
    For the sitePanelBar i have tried
    .RadPanelBar_Default .rpRootGroup .rpFirst  .rpExpanded .rpText
    {
      background-color:#333333 !important;
    }
    and many similar combinations but i am unable to only style the first element background color which is at current my requirement.
    Thanks for the help
  6. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    11 Dec 2008
    Link to this post
    Hi Aashish Gupta,

    Site PanelBar issue - there are two possible solutions:

    1. Create the following CSS classes in your custom skin CSS file (note that this solution will work if you use a custom skin for the RadPanelBar):

    /*Set the background color of the root items*/ 
    .RadPanelBar_Default 
        background#333333
    /*Set the background color of the child items to distinguish them from the root items*/ 
    .RadPanelBar_Default .rpGroup 
        background#edffe0

    For your convenience I have attached the whole skin file.

    2. Create a CSS class specifying the background color and then set it to the CssClass property of the root items:

    ~/Sitefinity/UserControls/Navigation35/SitePanelbar.ascx
    <style > 
       .root 
       { 
        background: #333333 !important; 
       } 
    </style> 
     
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/> 
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" > 
    </telerik:RadPanelBar> 

    ~/Sitefinity/UserControls/Navigation35/SitePanelbar.ascx.cs
    public void RadPanelbar1_ItemDataBound(object sender, RadPanelBarEventArgs e) 
        { 
            if (e.Item.Level == 0) 
            { 
                e.Item.CssClass = "root"
            } 
     
            ... 
        } 

    Site Menu issue - hook on the DataBound server event of the RadMenu and modify Site Menu control like this:

    ~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /> 
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SitemapDataSource1" OnDataBound="RadMenu1_DataBound" OnItemDataBound="RadMenu1_ItemDataBound"
    </telerik:RadMenu> 

    ~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx.cs
        protected void RadMenu1_DataBound(object sender, EventArgs e) 
        { 
            this.InsertSeparator(0, this.RadMenu1); 
        } 
     
        public void RadMenu1_ItemDataBound(object sender, RadMenuEventArgs e) 
        { 
            if (e.Item.Level == 0) 
            { 
                this.InsertSeparator(e.Item.Index + 1, this.RadMenu1); 
            } 
            ...  
        } 
     
        private void InsertSeparator(int index, RadMenu menu) 
        { 
            RadMenuItem separator = new RadMenuItem(); 
            separator.IsSeparator = true
            separator.Text = "|"
     
            menu.Items.Insert(index, separator); 
        } 

    Do let us know if this helps.

    Regards,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    11 Dec 2008
    Link to this post
    Thanks pepi for quick reply i am working on this solution now as you told and will let you know if i have any issues.
    Your support is really great
    Thanks again
  8. Candace Sweigart
    Candace Sweigart avatar
    7 posts
    Registered:
    06 Jul 2009
    24 Jul 2009
    Link to this post
    Solution worked great.  Thank you for the support.
Register for webinar
8 posts, 0 answered