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

Forums / General Discussions / Configuring Multiple Panelbars on 1 page.

Configuring Multiple Panelbars on 1 page.

9 posts, 0 answered
  1. Joel Housman
    Joel Housman avatar
    12 posts
    Registered:
    28 Jul 2009
    10 Dec 2009
    Link to this post
    Hello,

    My current sitemap is something like this.

    Pagegroup 1
    -->Parent 1
    --->Child 1
    ---->GrandChild 1
    ---->GrandChild 2
    --->Child 2
    --Parent 2
    --->Child 1
    --->Child 2

    Pagegroup 2
    -->Parent 1
    --->Child 1
    --->Child 2
    --Parent 2
    --->Child 1
    --->Child 2


    The desired functionality we wish to achieve is have 2 separate menus on each page with:
    1. A different look and feel. I understand how skinning works and am able to accomplish this by applying a separate skin to each. 

    2. Have these menu's display different depth of child items. For example, Pagegroup 1 is going to be a Panelbar that has a StartingNodeOffset of 1 and a MaxDataBindDepth of 2 so as to show Parents and Childs but not Grandchildren. (Our designer has this weird desire to have the Grandchildren displayed on their own on a separate menu). Pagegroup 2 is going to be a Panelbar that only displays the Parent items.

    3. This is my main problem. I wish for a second menu on the page to display the Parent level of Pagegroup 2 as well. I cannot figure out if it is possible when configuring a Panelbar, via its editable properties, if you can specify which pagegroup to anchor/bind itself to. I cannot find any documentation on Panelbar's editable fields other than this page http://www.telerik.com/help/aspnet/panelbar/panelbar_data%20binding%20overview.html. This might be explaining the solution to me, yet I do not understand it. When I try to setup 2 panelbars on a page, of course, they try to display the same items from the same pagegroup. I was the 2nd panelbar to display items from an entirely different pagegroup. It seems like an obvious thing to want, yet I cannot find a simple solution.

    I foresee a way to 'hack' the solution by setting up a complex hierarchy of pagegroups within pagegroups to display the correct items via controlling the StartingNodeOffset and MaxDataBindDepth but I'd rather not go that route if I don't have to because it would make editing the site for CMS users rather tedious.

    Also keep in mind, I'm an HTML/CSS/Photoshop guy, not a .NET developer so I'm also looking for a solution that doesn't require me to rewrite my own custom Panelbar :)

    Joel Housman
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Dec 2009
    Link to this post
    Hello Joel Housman,

    Open the code behind located under Sitefinity/UserControls/Navigation35/SitePanelBar.ascx.cs and add the following property as it is pasted below:

    [WebEditor("Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms")]
       [Browsable(true)]
       [Category("Navigation")]
       public string StartingNodeUrl
       {
           get
           {
               return this.SiteMapDataSource1.StartingNodeUrl;
           }
           set
           {
               this.SiteMapDataSource1.StartingNodeUrl = value;
           }
       }

    This will allow you to set the starting node from which the PanelBar will be bound using an user friendly selector. Do not forget to set ShowStartingNode to true.


    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.
  3. Joel Housman
    Joel Housman avatar
    12 posts
    Registered:
    28 Jul 2009
    11 Dec 2009
    Link to this post
    Hi Ivan,

    I did as you said and am now getting this error within the CMS.

    c:\Program Files\telerik\Sitefinity3.7\WebSites\gbci\Sitefinity\UserControls\Navigation35\SitePanelbar.ascx.cs(63): error CS0246: The type or namespace name 'WebEditor' could not be found (are you missing a using directive or an assembly reference?) 

    I've pasted in the entirety of the SitePanelbar.ascx.cs file below:

    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Collections; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using System.ComponentModel; 
     
    using Telerik; 
    using Telerik.Cms; 
    using Telerik.Cms.Web; 
    using Telerik.Web.UI; 
    using Telerik.Caching; 
     
    /// <summary> 
    /// Represents a wrapper for <strong>RadPanelbar</strong> and 
    /// <strong>SitemapDataSource</strong>. Derives from 
    /// <href="http://msdn2.microsoft.com/en-us/library/system.web.ui.usercontrol.aspx">System.Web.UI.UserControl</a>
    /// </summary> 
    /// <summary> 
    /// A user control that wraps a <strong>RadPanelbar</strong> and a 
    /// <strong>SitemapDataSource</strong> to provide easier navigation functionality without 
    /// the need for manual binding. 
    /// </summary> 
    /// <remarks> 
    ///     <para>The control has the functionality of <strong>RadPanelbar</strong>, however it 
    ///     is specifically configured for representing sitemap data. It exposes the contained 
    ///     RadPanelbar as a property, whose own properties can be edited from the visual 
    ///     property editor of Sitefinity.</para> 
    ///     <para>The control also supports disabling redirection for group pages through its 
    ///     <strong>HideUrlForGroupPages</strong> property.</para> 
    /// </remarks> 
    [DefaultProperty("StartingNodeOffset")] 
    public partial class UserControls_Nav_SitePanelbar : System.Web.UI.UserControl, ICacheableObject 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!Page.IsPostBack) 
            { 
                ICmsUrlContext urlContext = CmsUrlContext.Current; 
                if (urlContext != null) 
                { 
                    RadPanelbar1.DataBind(); 
                    string currentUrl = SiteMapDataSource1.Provider.CurrentNode.Url; //UrlHelper.ResolveUrl(urlContext.Path); 
                    foreach (RadPanelItem item in RadPanelbar1.GetAllItems()) 
                    { 
                        if (currentUrl.Equals(item.ResolveUrl(item.NavigateUrl), StringComparison.OrdinalIgnoreCase)) 
                        { 
                            item.Selected = true
                            item.Expanded = true
                            item.ExpandParentItems(); 
                            break; 
                        } 
                    } 
                } 
            } 
        } 
         
    [WebEditor("Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms")] 
       [Browsable(true)] 
       [Category("Navigation")] 
       public string StartingNodeUrl 
       { 
           get 
           { 
               return this.SiteMapDataSource1.StartingNodeUrl; 
           } 
           set 
           { 
               this.SiteMapDataSource1.StartingNodeUrl = value
           } 
       } 
     
        /// <summary> 
        /// Overriden. Renders the control content. 
        /// </summary> 
        /// <param name="writer"></param> 
        protected override void Render(HtmlTextWriter writer) 
        { 
            // Checks if this is called by the Search Indexer and does not render anything if so. 
            // Navigation controls are present in every page and should NOT be indexed multiple times. 
            if (!CmsContext.IsCrawlerRequest) 
                base.Render(writer); 
        } 
     
        #region Data Fields 
     
        /// <summary> 
        /// Holds a boolean value, indicating if the <see cref="RadPanelbarItem"/> should redirect  
        /// to other pages in the case when its corresponding page is a group page. If it is set to false,  
        /// the panelbar item will only expand to show its child items and will not redirect to another page. 
        /// </summary> 
        private bool hideUrlForGroupPages = false
     
        #endregion 
     
        /// <summary> 
        /// (Exposed from contained RadPanelbar.) Gets or sets the Cascading Style Sheet 
        /// (CSS) class rendered by the Web server control on the client. 
        /// </summary> 
        /// <remarks> 
        /// (Inherited from 
        /// <onclick="javascript:navigateToHelp2Keyword('frlrfSystemWebUIWebControlsWebControlClassTopic','System.Web.UI.WebControls.WebControl')" href="#">System.Web.UI.WebControls.WebControl</a>
        /// </remarks> 
        #region Properties 
     
        [Browsable(true)] 
        [Category("Appearance")] 
        public string CssClass 
        { 
            get 
            { 
                return this.RadPanelbar1.CssClass; 
            } 
            set 
            { 
                this.RadPanelbar1.CssClass = value
            } 
        } 
     
        /// <summary> 
        /// Represents a reference to the wrapped Panelbar control. Can be used to access 
        /// properties which are not directly available in the user control. 
        /// </summary> 
        [Browsable(true)] 
        public RadPanelBar PanelBar 
        { 
            get 
            { 
                return this.RadPanelbar1; 
            } 
            set 
            { 
                this.RadPanelbar1 = value
            } 
        } 
     
        /// <seealso cref="hideUrlForGroupPages"/> 
        /// <summary> 
        /// Gets or sets a value indicating whether the RadPanelItems representing group 
        /// pages should redirect to other pages or only expand to show their child pages. 
        /// </summary> 
        /// <remarks> 
        /// By default every group page in Sitefinity redirects to its first child page when 
        /// accessed. This property enables overriding this behaviour by checking the page type for 
        /// every node in the RadPanelbar and disabling redirection if the page is a group page. If 
        /// redirection is disabled, the node only expands to show its children. 
        /// </remarks> 
        /// <seealso cref="RadPanelbar1_ItemDataBound">RadPanelbar1_ItemDataBound Method</seealso> 
        /// <example> 
        ///     <para><font style="BACKGROUND-COLOR: #ffffff">This example shows how the 
        ///     HideUrlForGroupPages property is used. There are four pages created in Sitefinity - 
        ///     FirstPage, SecondPage, ChildPage1 and ChildPage2. ChildPage1 is a subpage of 
        ///     FirstPage. ChildPage2 is a subpage of SecondPage. All pages are normal, except for 
        ///     SecondPage, which is a group page. Here is how the hierarchy looks:</font></para
        ///     <para> 
        ///         <img src="file:///C:/Documents%20and%20Settings/ingilizov/Desktop/PanelbarExamples/PanelbarExample1_img1.JPG"/> 
        ///     </para> 
        ///     <para>By default the HideurlForGroupPages is set to <strong>false</strong>. When we 
        ///     expand the node for SecondPage, we are redirected to ChildPage2.</para> 
        ///     <para> 
        ///         <img src="file:///C:/Documents%20and%20Settings/ingilizov/Desktop/PanelbarExamples/PanelbarExample1_img2.JPG"/> 
        ///         <img src="file:///C:/Documents%20and%20Settings/ingilizov/Desktop/PanelbarExamples/PanelbarExample1_img3.JPG"/> 
        ///     </para> 
        ///     <para>Now, if we set the value of the property to true, the Panelbar is expanded 
        ///     and we are not redirected.</para> 
        ///     <para> 
        ///         <img src="file:///C:/Documents%20and%20Settings/ingilizov/Desktop/PanelbarExamples/PanelbarExample1_img4.JPG"/> 
        ///         <img src="file:///C:/Documents%20and%20Settings/ingilizov/Desktop/PanelbarExamples/PanelbarExample1_img5.JPG"/> 
        ///     </para> 
        /// </example> 
        [Browsable(true)] 
        [Category("Behavior")] 
        [DefaultValue(false)] 
        public bool HideUrlForGroupPages 
        { 
            get 
            { 
                return this.hideUrlForGroupPages; 
            } 
            set 
            { 
                this.hideUrlForGroupPages = value
            } 
        } 
     
        /// <summary> 
        /// (Exposed from contained SitemapDataSource.) Gets or sets a positive or negative 
        /// integer offset from the starting node that determines the root hierarchy that is 
        /// exposed by the data source control. 
        /// </summary> 
        /// <remarks> 
        ///     <para>If the <b>StartingNodeOffset</b> property is set to a value other than 0, it 
        ///     affects the starting node and with it the site map data hierarchy that is exposed 
        ///     by the <b>SiteMapDataSource</b> control. The negative or positive integer value of 
        ///     the <b>StartingNodeOffset</b> identifies the number of levels up or down the site 
        ///     map hierarchy from the starting node that is identified by the 
        ///     <strong>StartFromCurrentNode</strong> and StartingNodeUrl properties to offset the 
        ///     starting node of the subtree that is exposed by data source control.</para> 
        ///     <para>If the identified starting node is the node that represents the currently 
        ///     requested page, the <b>StartingNodeOffset</b> is ignored.</para> 
        ///     <para>If the <b>StartingNodeOffset</b> property is set to a negative number 
        ///     -<i>n</i>, the starting node of the subtree that is exposed by the data source 
        ///     control is the ancestor node <i>n</i> hierarchical levels above the identified 
        ///     starting node. If the value <i>n</i> is greater than the number of ancestor levels 
        ///     in the hierarchical tree, the starting node of the subtree is the root node of the 
        ///     site map hierarchy.</para> 
        /// </remarks> 
        /// <value> 
        /// The default is 0, which indicates that the root hierarchy exposed by the 
        /// SiteMapDataSource is the same as the starting node. 
        /// </value> 
        [Browsable(true)] 
        [Category("Navigation")] 
        public int StartingNodeOffset 
        { 
            get 
            { 
                return this.SiteMapDataSource1.StartingNodeOffset; 
            } 
            set 
            { 
                this.SiteMapDataSource1.StartingNodeOffset = value
            } 
        } 
     
        /// <summary> 
        /// (Exposed from contained SitemapDataSource.) Gets or sets a value indicating 
        /// whether the site map node tree is retrieved using the node that represents the current 
        /// page. 
        /// </summary> 
        /// <value> 
        ///     <strong>true</strong> if the node tree is retrieved relative to the current page; 
        /// otherwise, <b>false</b>. The default is <b>false</b>
        /// </value> 
        /// <remarks> 
        /// The <b>StartFromCurrentNode</b> property is evaluated during calls to the GetView 
        /// and the GetHierarchicalView methods to help determine which site map node to use as a 
        /// starting point to build the node tree. The <b>StartFromCurrentNode</b> and 
        /// StartingNodeUrl properties are mutually exclusive — if you set the 
        /// <b>StartingNodeUrl</b> property, ensure that the <b>StartFromCurrentNode</b> property 
        /// is <b>false</b>
        /// </remarks> 
        [Browsable(true)] 
        [Category("Navigation")] 
        public bool StartFromCurrentNode 
        { 
            get 
            { 
                return this.SiteMapDataSource1.StartFromCurrentNode; 
            } 
            set 
            { 
                this.SiteMapDataSource1.StartFromCurrentNode = value
            } 
        } 
     
        /// <summary> 
        /// (Exposed from contained SitemapDataSource.) Gets or sets a value indicating 
        /// whether the starting node is retrieved and displayed. 
        /// </summary> 
        /// <value> 
        ///     <strong>true</strong> if the starting node is displayed; otherwise, <b>false</b>
        /// The default is <b>false</b>
        /// </value> 
        /// <remarks> 
        /// The <b>ShowStartingNode</b> property is evaluated during calls to the GetView and 
        /// GetHierarchicalView methods, when the node tree that is returned by these methods is 
        /// populated. 
        /// </remarks> 
        [Browsable(true)] 
        [Category("Navigation")] 
        [DefaultValue(false)] 
        public bool ShowStartingNode 
        { 
            get 
            { 
                return this.SiteMapDataSource1.ShowStartingNode; 
            } 
            set 
            { 
                this.SiteMapDataSource1.ShowStartingNode = value
            } 
        } 
        /// <summary>(Exposed from contained RadPanelbar.)</summary> 
        [Browsable(true)] 
        [Category("Appearance")] 
        public string SkinID 
        { 
            get 
            { 
                return this.RadPanelbar1.SkinID; 
            } 
            set 
            { 
                this.RadPanelbar1.SkinID = value
            } 
        } 
     
        /// <summary> 
        /// (Exposed from contained RadPanelbar.) Gets or sets the skin used by 
        /// RadPanelbar. 
        /// </summary> 
        /// <value> 
        /// A 
        /// <onclick="javascript:navigateToHelp2Keyword('frlrfSystemStringClassTopic','System.String')" href="#">String</a> specifying the skin. The default value is empty string 
        ///    (""). 
        /// </value> 
        /// <remarks>If the value is empty string ("") no skin is used.</remarks> 
        [Browsable(true)] 
        [Category("Appearance")] 
        public string Skin 
        { 
            get 
            { 
                return this.RadPanelbar1.Skin; 
            } 
            set 
            { 
                this.RadPanelbar1.Skin = value
            } 
        } 
     
        #endregion 
     
        #region Methods 
     
        /// <remarks> 
        /// The event handler is used to enable the feature of hiding the url for a group 
        /// page PanelItem. The type of the page corresponding to the current node is checked and 
        /// if it is a group page, the url for the CmsSiteMapNode is set to an empty string. 
        /// </remarks> 
        /// <summary> 
        /// A handler for the <strong>RadPanelbar</strong> ItemDataBound event. Performs 
        /// hiding of URLs for group pages, if the <strong>HideUrlForGroupPages</strong> property 
        /// is <strong>true</strong>
        /// </summary> 
        /// <param name="sender">The object that caused the event.</param> 
        /// <param name="e"
        /// An instance of the RadPanelbarEventArgs class containing information about the 
        /// event. 
        /// </param> 
        public void RadPanelbar1_ItemDataBound(object sender, RadPanelBarEventArgs e) 
        { 
            if (this.hideUrlForGroupPages) 
            { 
                CmsSiteMapNode node = e.Item.DataItem as CmsSiteMapNode; 
                if (node != null && node.PageType == CmsPageType.Group) 
                { 
                    e.Item.NavigateUrl = ""
                } 
            } 
        } 
     
        #endregion 
     
        #region ICacheableObject Members 
     
        public System.Web.Caching.CacheDependency[] GetDependencies() 
        { 
            CmsSiteMapProvider provider = null
            if (!String.IsNullOrEmpty(this.SiteMapDataSource1.SiteMapProvider)) 
                provider = SiteMap.Providers[this.SiteMapDataSource1.SiteMapProvider] as CmsSiteMapProvider; 
            else 
                provider = SiteMap.Provider as CmsSiteMapProvider; 
            if (provider != null) 
            { 
                return new System.Web.Caching.CacheDependency[] { provider.CloneCacheDependency() }; 
            } 
            return null; 
        } 
     
        #endregion 
     

  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    14 Dec 2009
    Link to this post
    Hi Joel Housman,

    Can you add a reference to Telerik. Cms.Web.UI in your control code file:
    using Telerik.Cms.Web.UI;


    All the best,
    Radoslav Georgiev
    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.
  5. Joel Housman
    Joel Housman avatar
    12 posts
    Registered:
    28 Jul 2009
    14 Dec 2009
    Link to this post
    IT WORKED!!!!!

    Thank you so much guys. I really appreciate it. We've been working on this one for a while now. This will allow me to move forward with development (only at week behind schedule now).

    Joel
  6. Joel Housman
    Joel Housman avatar
    12 posts
    Registered:
    28 Jul 2009
    14 Dec 2009
    Link to this post
    So - I've now ran into another issue, which is different from the original problem, but still related.


    I'm attaching 2 screenshots for reference.

    The first shot shows the page that I've now setup, with the Tier1 and Tier2 items expanded on the left. The menu you see on the right side is the Tier3 items that fall under the selected Tier2 on the left. What we want to happen is, when you click on a Tier3 item on the right side, that the menu on the left which displays Tier1 & Tier2 to remain expanded to denote you're still within that section.

    Is this possible?
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 Dec 2009
    Link to this post
    Hi Joel Housman,

    The RadPanelBar does not have tiers. The control has items - root and level items. The problem here is that you are using two controls and you need to get the selected page from the other control, so you can determine which item to remain expanded. The js code below illustrates how to set an RadPanelBar item expanded if you are on a certain url - the page selected from your second RadPanelBar control

    <script type="text/javascript">
     
    function OnClientLoad(sender, args) {
     
    var panelBar = $find("<%= RadPanelbar1.ClientID %>");
    var item = panelBar.findItemByText("itemOne");
    var myString = new String(document.location);
    var urlparts = myString.split('/');
    var host = urlparts[0];
    var page = urlparts[urlparts.length - 1];
    if (page == "panelItem.aspx") {
        item.set_expanded(true);
    }
    else {
        item.set_expanded(false);
    }
     
    }
      
    </script>
         
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/>
    <telerik:RadPanelBar OnClientLoad="OnClientLoad" ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1"EnableViewState="false">
    </telerik:RadPanelBar>

    You can gather more information about client side API at RadPanelItem object

    All the best,
    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.
  8. Joel Housman
    Joel Housman avatar
    12 posts
    Registered:
    28 Jul 2009
    16 Dec 2009
    Link to this post
    Yeah, unfortunately that is gibberish to me. I'm an HTML/CSS guy. Not a .NET or javascript developer. I've been handed a mockup design in photoshop and am trying to make use of your product to duplicate the requested visuals and functionality. So what you're telling is that it cannot be done without custom programming (as in the controls cannot accomplish this out of the box).

    Do you have some location on your website in which you document, in expanded detail, what all of the settings contained within the "edit" dialog boxes mean? The descriptions that the little popups from clicking the ? marks are not acceptable. They themselves require their own documentation to understand them.

    See attached screenshots.


  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    16 Dec 2009
    Link to this post
    Hi Joel Housman,

    You can take a look at RadPanelBar documentation where all events and methods are documented - RadPanelBar for ASP.NET AJAX


    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.
Register for webinar
9 posts, 0 answered