Collapse selected item in SingleExpandedItem mode?

[Adam]

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

[Peter]

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

[Adam]

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

[Peter]

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