is there a way to collapse all the panels of Kendo Panelbar, on an action?

Question

I am working on an app where i am adding panelbars (multiselection) using JSP Wrapper (which means no ID to each of the panels), and inside those have the grids.

The

Answer 1

If the id of 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 under #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 all panel and as a bonus to the answer, you can expand only the selected after that 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
            });