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

Forums / Developing with Sitefinity / Need Sub-Menu Module

Need Sub-Menu Module

27 posts, 0 answered
  1. Charles Russell
    Charles Russell avatar
    9 posts
    Registered:
    29 Apr 2008
    12 May 2008
    Link to this post
    Hello,
    I have been struggling for a sub menu module for sitefinity.   On my main page I need a menu of some kind.  It can be just links but it needs to take a menu point such as "page 1" and show links to all children from that page forward so if there is

    Page 1 and page 1 has 3 children
     Page 1 A
     Page 1 B
     Page 1 C

    I need the menu to be just
    Page 1 A
    Page 1 B
    Page 1 C

    I need the same module to be able to do that for any menu I specify and just put into the properties the parrent and have the menu display the children. I tried to do this with the breadcrumb module but I can't get it to work. it sounds very simple but  I can't get it to work to save my life.  please help.

    Charles
  2. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    13 May 2008
    Link to this post
    Hello Charles Russell,

    You don't need to develop a custom module for this functionality. Actually, this very same navigation that you wish to implement is implemented on our sample TIU site.

    So here is what you need to do:
    - make a new user control that you will use for this menu
    - drag RadPanelbar control on the surface of this control
    - set the ExpandMode property of RadPanelbar to MultipleExpandedItem
    - drag a SitemapDataSource control on the surface of this user control
    - set the ShowStartingNode property of SitemapDataSource to false
    - bind the SitePanelbar to the SitemapDataSource
    - create a public property and name it "StartingNodeUrl", this property on your user control should get or set the StartingNodeUrl on the SitemapDataSource
    - upload the control to the Sitefinity
    - set the StartingNodeUrl property of your control (while you are in the page design mode) to the page whose children you want to display in the RadPanelbar

    I hope this helps. Let me know if you have any additional questions.

    Sincerely yours,
    Ivan
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Charles Russell
    Charles Russell avatar
    9 posts
    Registered:
    29 Apr 2008
    13 May 2008
    Link to this post
    I can't find the RadPanelBar control
  4. Charles Russell
    Charles Russell avatar
    9 posts
    Registered:
    29 Apr 2008
    13 May 2008
    Link to this post
    Ok heres the deal.  I found the control for RadPanelBar but I cannot find one for SiteMapDataSource I have it in the controls list but I can't find the ascx anywhere for it. please help
  5. Charles Russell
    Charles Russell avatar
    9 posts
    Registered:
    29 Apr 2008
    13 May 2008
    Link to this post
    Ok sorry for all the posts.  I have it built but I am not sure I am doing it correct can you let me know if there is an example of the code out there. You said it was on the TMU site but I don't know where that is.
    c
  6. Joe
    Joe avatar
    64 posts
    Registered:
    05 Jul 2012
    13 May 2008
    Link to this post
    The TIU site is a sample site that comes with Sitefinity (Telerik Internation University) which can be installed with the Sitefinity project manager.
  7. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    14 May 2008
    Link to this post
    Hello Joseph,

    Thank you for helping out other members of community.

    Hello Charles,

    I have created a simple user control which I have described in one of my previous posts and attached it to this message. You can upload the control directly to Sitefinity and when you click Edit, all you need to do is set the URL of the parent whose child nodes you wish to display in the navigation (this can also be automated if you wish... you can use SiteMap provider to get the current node and select it's parent as the Starting Node).

    Let me know if you have any additional questions or if we can help you in any other way.

    All the best,
    Ivan
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Charles Russell
    Charles Russell avatar
    9 posts
    Registered:
    29 Apr 2008
    14 May 2008
    Link to this post
    Ivan,
    Thanks that works perfectly.  I was struggling on how two bind the two controls together. I could make a copy of the existing control and manually set the starting node url but that was not very elegant.

    I have one other question.  if I want to be able to change the skin on the control I know I need to set a property on the control and somehow bind it to the parrent control. 

    can you help me on how to do this?
    charles
  9. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    15 May 2008
    Link to this post
    Hello Charles Russell,

    I am glad that the solution worked out. RadControls are very flexible in terms of customizing their appearance and there is an extensive documentation on how to do that for each of them, including the RadPanelBar. Here is the link where you can learn a lot about skinning RadPanelBar control:

    http://www.telerik.com/help/aspnet-ajax/panel_appearancecontrollingappearance.html

    Let me know if you have any additional questions or if we can assist you in any other way.

    Regards,
    Ivan
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Charles Russell
    Charles Russell avatar
    9 posts
    Registered:
    29 Apr 2008
    15 May 2008
    Link to this post
    Well all I need to know is how to add a property to the control you posted that will pass through to the sitefinity UI (so when you add it to the CMS page or template to "edit mode") you can have the option to put your "skin" name in there.  I can't figure it out.
    C
  11. Nikifor
    Nikifor avatar
    232 posts
    Registered:
    18 May 2013
    20 May 2008
    Link to this post
    Hello Charles Russell,

    There is a very useful blog post created by our colleague Ivan, which explains exactly how you can add properties to a custom control. For more information check the following link: Working with complex properties in Custom public controls (WebTypeEditor).

    Hope that you find it useful.

    Regards,
    Nikifor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  12. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    04 Jun 2008
    Link to this post
    is this really the best way to implement this? the menu control can automatically start at the current node, showing the selected item but I want to show it's 'neighbors' too, so that I can put a left-hand navigation on my subpages.

    It really needs to be automatic (for the users sake) so that whatever subpage they navigate to, or add or whatever, it will always show the links to all subpages in the menu.

    can this be done?
  13. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    04 Jun 2008
    Link to this post
    oop never mind i got it! if you set the "Start from Current Node" property to true, AND set the StartingNodeOffset to -1, it works!

    awesome!
  14. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    12 Oct 2008
    Link to this post
    i've successfully got this working, however, there are a few issues i have encountered which i thought i would ask in this thread rather than start a new one

    1. Selecting a Skin.
    I want to use a skin in the ~/RadControls/Panelbar/Skins folder.
    I added 2 properties to the control

     
       [WebEditor("Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms")]  
        public string Skin  
        {  
            get  
            {  
     
                return this.RadPanelbar1.Skin;  
            }  
            set  
            {  
                this.RadPanelbar1.Skin = value;  
            }  
        }  
     
     
    [WebEditor("Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms")]  
        public string SkinPath  
        {  
            get  
            {  
     
                return this.RadPanelbar1.SkinsPath;  
            }  
            set  
            {  
                this.RadPanelbar1.SkinsPath = value;  
            }  
        }  
     
     
     


    However, it seems to ignore these 2 properties and use the Panelbar.skin in the App_themes folder
    This would be fine if i was using 1 skin, however, i need 2 of these controls using different skins.

    Could someone please comment what i'm doing wrong?

    2. Display deeper levels on Panel bar (3rd level items dont show)
    Like i said, i can get the menu working fine, however, it only shows child pages, and not child child pages

    How would i acheive this?

    Thanks in advance
  15. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    14 Oct 2008
    Link to this post
    anyone got any comments about this?

    Sorry to sound pushy, but i need to get this control working asap for a client

    thanks in advance
  16. Randel
    Randel avatar
    50 posts
    Registered:
    30 Aug 2012
    14 Oct 2008
    Link to this post
    Quade,

    I'm not sure this will help you and it doesn't use the control Ivan's created for you.  But I've been asked to create a "subnav", which displays the a specific sitemap node, down, including nested child nodes.

    I've simply used a Site Panelbar, located under Navigation.  I only changed the following properties: StartingNodeOffset = -1, StartFromCurrentNode = True, ShowStartingNode = False.




    SelArom
  17. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    15 Oct 2008
    Link to this post
    thanks sel

    The problem with that approach is that the panel bar would only show the sub items of the parent

    However, the page this control goes on sits in the root and has no child pages.

  18. Randel
    Randel avatar
    50 posts
    Registered:
    30 Aug 2012
    15 Oct 2008
    Link to this post

    Hey Quade,

    Sorry for my misunderstanding.  I thought you wanted the ability to select/set a starting node and have all its child nodes displayed.

    Here is what I’ve done.  I have the Site Panelbar displaying a selected/set parent node and all its child nodes.  An example would be: a page, 4 deep (Root | Parent | Parent | Parent | Page) which displays all the node under, but not, Root.  The Site Panelbar is on a Template and its properties are set to: StartingNodeOffset = -3, StartFromCurrentNode = True, ShowStartingNode = False.This page's parent node also has two other sibling nodes, each have their own child nodes.  When one of these nodes is selected, the currently opened node closes and the new one is opened.

    Again, if this isn’t the solution you are looking for, can you please help me understand.

  19. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    15 Oct 2008
    Link to this post
    Hi Randel

    Thanks for this, although i dont think i'm explaining myself properly

    The situation is slightly different, but this simplifies the functionality i need:

    I have the following stucture

    Home
    Services
    ----Service1
    ---------page A
    ---------page B
    ----Service2
    ----Service3
    Contact

    as you can see, services has 3 subpages.

    If i put a panel bar on the services page, i can get it displaying all the 3 services and sub pages without any issue,

    however, i wish to have a panel bar on the HOME page which displays all 3 services and their children........the problem i have is displaying the services children (PAGE A & B), and styling them

    if you now re-read my post Quade, 10/12/2008 4:53:05 PM, it should make a bit more sense

    Any help on this appreciated.

  20. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Oct 2008
    Link to this post
    Hello Quade,


    Take a look at the the following articles of RadControls for ASP.NET AJAX developers manual.
    You can use the first example and just add a recursive function as it is shown in the second example.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  21. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    09 Nov 2009
    Link to this post
    Hello

    I know this is a silly question, but not being a developer, I don't know where i can add the code to modify the radpanelbar. (which aspx file do I add this code to? should i add it to the inner master page?)

    I have removed the skin from the panel bar so that I can use custom styling.
    Now I want to add the code as this example explains:

    http://www.telerik.com/help/aspnet-ajax/collapse-previously-expanded-header-item-when-clicking-header-item-without-child-items.html

    What i'm trying to do, is have the menu expand only when it is on the page with child nodes.
    If a user goes to another page, the child nodes are hidden.

    thanks
  22. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    09 Nov 2009
    Link to this post
    Hello LizzyM,

    You can create your custom user control and add the js logic from the article. The easiest option is editing Sitefinity/UserControls/Navigation35/SitePanelBar.ascx.

    Also you should check whether the item has child elements (e.Item.Items.Count)if not just do not bind it. You can add if loop to check this under ItemDataBound event of the control

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  23. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    10 Nov 2009
    Link to this post
    Hi Ivan

    Thanks for your reply, I think I got most of that, however, I'm not getting the result intended.
    As I mentioned, I'm a designer trying to get it to look pretty and doing my best within my limited knowledge of .net.

    All I'm trying to do is have the Panelbar appear with parent nodes closed (not show children) unless they are on the actual page with child pages attached to them. And of course, when you click on another parent node it goes to the page and shows its children (if any)...

    How can I do that? this is the code on the SitePanelbar.ascx page, but any time I try to modify it, i get errors.

    Can you please help with this?

    thanks very much

    liz

    =========
    1  
    2 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SitePanelbar.ascx.cs" Inherits="UserControls_Nav_SitePanelbar" %> 
    3 <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
    4  
    5 <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/> 
    6 <telerik:RadPanelBar ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false"
    7  
    8 </telerik:RadPanelBar> 


    =========

    above is the code for SitePanelbar.ascx which I've tried to amend with the help of the previous post.




  24. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Nov 2009
    Link to this post
    Hello LizzyM,

    Try using the code shown below:

    <script type="text/javascript">
       function ExpandAll(sender, args)
       {
           enumerateChildItems(args.get_item());
       }
        
       function enumerateChildItems(myitem)
       {
           for (var i=0; i < myitem.get_items().get_count(); i++)
               {
                   myitem.get_items().getItem(i).expand()
                   enumerateChildItems(myitem.get_items().getItem(i));
               }
       }
       </script>
         
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/>
    <telerik:RadPanelBar OnClientItemClicking="ExpandAll" ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false">
     
    </telerik:RadPanelBar>

    Add the control to your master page.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  25. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    10 Nov 2009
    Link to this post
    Hi Ivan,

    I have added that to the SitePanelbar.ascx page... without any errors.
    but also, It is still displaying all of the children and it does not close the parent at all.
    As soon as you try to click to close it, it opens up again.

    I don't know how to 'add the control to the masterpage' is this why it is broken?

    How do I achieve that?
    thanks
    liz

  26. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Nov 2009
    Link to this post
    Hi LizzyM,

    1. The parent is expanded only when there are childs inside it. Otherwise no.
    2. When you click on an item it makes a post back and redirect to the specified NavigateUrl.
    3. More information about master pages you can gather at MSDN . You can add the control to a master page from Pages>> Templates tab.

    You can add the following function OnClientItemclicking event that will disable the post back on the root items on level 0;

      <script type="text/javascript">
    function OnClientItemClicking(sender, args)
    {
       var item = args.get_item();
       if (item.get_level() == 0) {
           args.set_cancel(true);
           item.set_expanded(!item.get_expanded());
       }
       else
       {
          args.set_cancel(false);
       }
    }
      
    </script>

    You can gather more information about RadPanelBar API from here. The behavior you want to achieve require some coding and it cannot be achieved with styling only.  The samples I provided your should cover most of your task.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  27. Cranel Developer
    Cranel Developer avatar
    5 posts
    Registered:
    06 Apr 2010
    18 Aug 2010
    Link to this post
    Charles - I hope you've resolved your issue, it's been two years now.
    Anyway, I needed similar functionality. The RadPanel is the best control for the job, however, I needed each panel to be expanded and I didn't desire the functionality of the animation so I implemented my own.

    I just became very frustrated with the RadPanel and was wasting lots of time. Ideally I wanted to create a custom Sitemap provider but I just couldn't figure out how it all works.

    this is how I implemented the solution. Our 2nd level pages are set in stone, but the 3rd level could change and this control would take care of it.
    In a nut shell I use the FindSitemapNode(url) and get all it's children and build a menu with it.
    An image is attached to show what I was after.

    public partial class UserControls_My_controls_CustomPanelBar : System.Web.UI.UserControl
    {
         
        static string current;
        static string currentChild;
        static string childGroup;
        
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder navSB = new StringBuilder();
            Telerik.Cms.Web.CmsSiteMapNode currentNode = (Telerik.Cms.Web.CmsSiteMapNode)SiteMap.CurrentNode;
            // get the CmsPage represented by the current node and extract its ID
            if (currentNode != null)
            {
                Telerik.Cms.ICmsPage currentPage = currentNode.GetCmsPage();
                string[] navurls = { "~/Products/Scan.aspx","~/Products/Capture.aspx","~/Products/Manage.aspx","~/Products/Store.aspx","~/online-catalog.aspx"};
                foreach( var n in navurls)
                {
                  navSB.Append(SubMenu(currentPage,n.ToString()));
                }
                SubMenuLabel.Text = navSB.ToString();       
            }
        }
     
        protected static String SubMenu(Telerik.Cms.ICmsPage p, string url)
        {
            StringBuilder sb = new StringBuilder();
            current = "Normal";
            currentChild = "Normal";
            childGroup = "Normal";
     
            Telerik.Cms.Web.CmsSiteMapNode siteNode = (Telerik.Cms.Web.CmsSiteMapNode)SiteMap.Provider.FindSiteMapNode(url);
            if (siteNode.GetCmsPage().MenuName == p.MenuName || siteNode.GetCmsPage().MenuName == p.Parent.MenuName)
            {
                current = "Selected";
                childGroup = "Selected";
            }
     
            sb.AppendFormat("<div class=\"{1}Parent\" id=\"{2}\"><a href=\"/2010Website/{3}\" class=\"{1}Parent\">{0}</a></div>", siteNode.GetCmsPage().MenuName, current, siteNode.GetCmsPage().MenuName + "Menu", clipTilda(siteNode.GetCmsPage().StaticUrl));
                sb.AppendFormat("<div id=\"SubMenuChildren{0}\" class=\"childGroup{1}\"><ul class=\"submenulistUL\">", siteNode.GetCmsPage().MenuName, current);
            foreach (Telerik.Cms.Web.CmsSiteMapNode childNode in siteNode.ChildNodes)
            {
                if (p.StaticUrl == childNode.GetCmsPage().StaticUrl)
                {
                    currentChild = "SelectedChildMenu";
                    current = "SelectedParent";
                    sb.AppendFormat("<li class=\"submenulist\"><a href=\"/2010Website/{0}\" class=\"{2}\">{1}</a></li>", clipTilda(childNode.GetCmsPage().StaticUrl), childNode.GetCmsPage().MenuName, currentChild);
                }
                else
                {
                    currentChild = "NormalChildMenu";
                    sb.AppendFormat("<li class=\"submenulist\"><a href=\"/2010Website/{0}\">{1}</a></li>", clipTilda(childNode.GetCmsPage().StaticUrl), childNode.GetCmsPage().MenuName, currentChild);
                }
            }
            sb.Append("</ul></div>");
            return sb.ToString();
        }
     
        protected static String clipTilda(string s)
        {
            return s.Remove(0, 2);
        }
    }

    And some very simple styles
    .NormalParent
    {
        background:#E7E7E8;
        color:#747678;
        width:119px;
        height:17px;
          padding-left:3px;
    }
    .SelectedParent
    {
        background:#FEE3CA;
        color:#F58425;   
        width:119px;
        height:17px;
        padding-left:3px;
        font-weight:bold;
    }
    .SelectedChildMenu
    {
        background:#FEF1E3;
         color:#F58425;   
    }
    .NormalChildMenu
    {
        background:#FFFFFF;
        color:#747678;
        
    }
    .childGroupSelected
    {
        background:#FEF1E3;
         width:122px;
    }
    .submenulistUL
    {
        padding:0;
        margin:0px 0px 4px 0px;
        list-style:none;
        display:block;
       
    }
    .submenulist
    {
        width:117px;
        padding:0px 0px 5px 5px;
        margin:0px;
        list-style:none;
        display:block;
        border-bottom:1px solid #E7E7E8;
       
    }
Register for webinar
27 posts, 0 answered