Collapse selected item in SingleExpandedItem mode?

4 posts, 0 answers
  1. Adam
    Adam avatar
    13 posts
    Member since:
    Sep 2011

    Posted 20 Oct 2011 Link to this post

    Looking at the demo (@ http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/panelbarbehavior/defaultcs.aspx) it seems the default behavior of a RadPanelBar in SingleExpandedItem mode does not allow you to click on a selected (and thus expanded) item to re-collapse it.

    I just watched our customer click on the bar a dozen times trying to collapse it so they could view items below more easily.... they seemed to think that bar was broken :)

    I'd like to give them the expected behavior - basically exactly like how the PanelBar work in MultipleExpandedItems mode, except of course clicking on a different item collapses the currently expanded item like in SingleExpandedItem mode, so only one item at a time is displayed.


    Is there any easy way to accomplish this? I was kinda of surprised it's not the default behavior, given the expand/collapse button on the right of the bar.


    Thanks,
    -Adam
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 21 Oct 2011 Link to this post

    Hello Adam,

    Yes, there is an easy workaround:
    <script type="text/javascript">
           function OnClientItemExpand(sender, args) {
               var items = sender.get_items();
               for (var i = 0; i < items.get_count(); i++) {
                   if (items.getItem(i).get_text() != args.get_item())
                   {
                       items.getItem(i).collapse();  
                   }
               }
     
           }
       </script>
       <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="MultipleExpandedItems"
            OnClientItemExpand="OnClientItemExpand">


    Greetings,
    Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam
    Adam avatar
    13 posts
    Member since:
    Sep 2011

    Posted 21 Oct 2011 Link to this post

    Thank you Peter. This didn't quite give me the effect I wanted, so I modified the code a bit and went a different route.


    I guess I forgot to mention that the panel items contain multiple RadGrids that are  dynamically created when the item is expanded, and I'm using an AJAX manager with a loading panel to AJAXify the postbacks... it seems to affect the look of the panel when expanding/collapsing.

    The solution you gave is perfectly functional, but it looks a bit strange in the browser - you can see the items expanding and filling in behind the semi-transparent loading panel, giving the panel a very jerky feeling as you navigate it. 


    Since the workaround has to be in the javascript, I went ahead and added a OnPanelItemClicking() function with a check like this:

          if (expanded && level == 0) {
                    //if the item is expanded and is a root level item, collapse it
                    panelItem.collapse()
                }

    That let's me leave the panel in SingleExpandedItem mode, and collapses the panel when clicked. It still causes a postback when the same item is re-expanded, but I'm totally okay with that.


    Thanks,
    -Adam
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 24 Oct 2011 Link to this post

    Hi Adam,

    I am glad to learn that you managed to find a satisfactory workaround.

    Thank you for sharing your fingings in the forum.

    Kind regards,
    Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top