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

Forums / Designing with Sitefinity / Site PanelBar all nodes collapse onLoad

Site PanelBar all nodes collapse onLoad

6 posts, 0 answered
  1. Brad
    Brad avatar
    8 posts
    Registered:
    18 Feb 2008
    09 Nov 2009
    Link to this post
    I am using SF Community Ed. 3.6. I have an issue finding out how to force the nodes to be collapsed on load using the Site PanelBar. By default all nodes are expanded. When I drag the Site Panelbar onto my template it uses a default skin. And it works as expected, however as soon as I implement my skin it would appear none of the AJAX (collapse and expand) functions are working. I have read a couple of posts, and attempting to manipulate the RadPanelBar by opening the Site Panelbar, going to misc. and clicking edit on the Panelbar item, and then altering the properties doesn't seem to be working. What am I missing?

    Thanks to anyone for help in advance.

    Great product!
  2. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    10 Nov 2009
    Link to this post
    Hi Brad,

    You can collapse all items in the SitePanelBar in OnClientLoad event. Here is how it is done:
    1. Open ~\Sitefinity\UserControls\Navigation35\SitePanelbar.ascx
    2. Add the OnClientLoad event with its JS function:
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false" OnClientLoad="collapseAll">
    </telerik:RadPanelBar>
    <script type="text/javascript">
        function collapseAll() {
            var panelBar = $find("<%= RadPanelbar1.ClientID %>");       
            for (var i = 0; i < panelBar.get_allItems().length; i++) {
                panelBar.get_allItems()[i].collapse();
            }
        }
    </script>

    You can find more information on the RadPanelBar's client-side API reference here.

    Hope this helps.

    Regards,
    Nikolai
    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. Brad
    Brad avatar
    8 posts
    Registered:
    18 Feb 2008
    11 Nov 2009
    Link to this post
    Thanks for responding Nikolai.

    I have implemented this as indicated, and what this function does is collapse the nodes on the current root. What I want to do is collapse all roots and nodes on all pages when the page loads.

    Hope that makes sense, and thanks again for all your help.

    Regards,

    Brad
  4. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    12 Nov 2009
    Link to this post
    Hi Brad,

    You can also try to add the ExpandMode and AllowCollapseAllItems properties:
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server" AllowCollapseAllItems="true" ExpandMode="SingleExpandedItem" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false" OnClientLoad="collapseAll">
    </telerik:RadPanelBar>

    Also are you using the default skin or a custom one?

    Kind regards,
    Nikolai
    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. Brad
    Brad avatar
    8 posts
    Registered:
    18 Feb 2008
    30 Nov 2009
    Link to this post
    Thanks again for responding Nikolai.

    Yes; I am using a custom skin.

    I have also set the ExpandMode and AllowCollapseAllItems as indicated but I am unable to get it to function correctly.

    Again the situation is that I have a parent node titled 'Services' which is set as a Page Group. Under that parent node I have two child nodes. One of the child nodes is a page 'Services Overview'. The other child node is another Page Group 'Highlighted Services'. Under this child node which is a Page Group (Highlighted Services) I have several other child nodes (i.e.; Highlighted Service 1, Highlighted Service 2, Highlighted Service 3, etc.). When you click on the parent node 'Services' it redirects to the first sub-page which is the first child node 'Services Overview'. Now, when this click event happens the expected behavior is for the 'Highlighted Services' child nodes (Highlighted Service 1, Highlighted Service 2, Highlighted Service 3, etc.) to be collapsed except it is not. All the child nodes are expanded. When I click on one of the child nodes (Highlighted Service 1, Highlighted Service 2, Highlighted Service 3, etc.) of the Page Group 'Highlighted Services' (remember this Page Group is a child of the parent 'Services') it will collapse as expected.

    I hope that communicates well.

    Any help would be appreciated.

    The user control SitePanelBar.ascx is as follows:
    1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SitePanelbar.ascx.cs" Inherits="UserControls_Nav_SitePanelbar" %> 
    2 <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
    3  
    4 <script type="text/javascript"
    5     function collapseAll() { 
    6         var panelBar = $find("<%= RadPanelbar1.ClientID %>"); 
    7         for (var i = 0; i < panelBar.get_allItems().length; i++)  
    8         { 
    9             panelBar.get_allItems()[i].collapse(); 
    10         } 
    11     } 
    12 </script> 
    13  
    14 <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/> 
    15  
    16 <telerik:RadPanelBar ID="RadPanelbar1" runat="server" AllowCollapseAllItems="true" ExpandMode="SingleExpandedItem" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false" OnClientLoad="collapseAll"
    17 </telerik:RadPanelBar> 
    18  
    19 </telerik:RadPanelBar> 


  6. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    01 Dec 2009
    Link to this post
    Hello Brad,

    As far as I see you have two closing tags - </telerik:RadPanelBar> in your template. But this behavior might be coming from your custom skin. Otherwise all items should be collapsed no matter of the page you are currently on.

    All the best,
    Nikolai
    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
6 posts, 0 answered