Is there a way to collapse all Kendo Panelbar panels?

Question

I am working on an application in which I add panel panels (multi-selector) using JSP Wrapper (which means there is no identifier for each panel), and there are grids inside them.

Grids store data specific to the selected person, which are displayed as list items (images) at the top of the page.

What I want to do is that when the user changes the person’s choice, from the currently selected to another, collapse all the panels of the panel of the kendo panel. This will help reload the data of the new person, because when the user selects / expands the panel to view the data, I would catch the event and reload the grid with a new data source based on the selected person.

I hope I make sense here, but I'm not sure how to collapse all PanelBar panels.

Any suggestions

Answer 1

If the id your PanelBar is panel , do:

 $("#panel").data("kendoPanelBar").collapse($("li", "#panelbar")); 

or

 var panelbar = $("#panelbar").data("kendoPanelBar"); panelbar.collapse($("li", panelbar.element)); 

i.e. we will collapse every li element at #panelbar .

EDIT . If you want to remove the selection, add:

 $(".k-state-selected", panelbar.element).removeClass("k-state-selected"); 

Answer 2

HTML

  <ul id="palettePanelBar"> <li id="item1" class="k-state-active"> <!--Some Data--> </li> <li id="item2"> <!--Some Data for second item--> </li> </ul> 

Javascript

  var panelBar = $("#palettePanelBar").data("kendoPanelBar"); panelBar.expand($('[id^="item"]')); 

Answer 3

You can use this block to collapse the entire panel and as a bonus to the answer, you can expand only the ones selected after this in this way:

 var panelBar = $("#importCvPanelbar").data("kendoPanelBar"); panelBar.collapse($("li"));// will collapse all panel item panelBar.bind("select", function(e) { var itemId = $(e.item)[0].id; panelBar.expand(itemId);// will expand the selected one });