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 grids are storing data specific to the selected person, who are displayed as list items(images) on the top of the page.

What I want to do is that when user changes the selection of person, from the current selected to another, collapse all the panels of the kendo panelbar. This would help in reloading the data of the new person, because when the user will select/expand the panel to see the data, i would catch the event and reload the grid with a new Datasource, based on the selected person.

I hope I make sense here, but I am not sure how to collapse all the panels of the PanelBar.

Any Suggestions??

OnaBai · Accepted Answer · 2013-05-11T22:58:48.167

13

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");

edited May 11 '13 at 22:58

answered May 10 '13 at 00:37

OnaBai

40,767
6
96
125

Thanks! that did the trick:) but it leaves behind the last selected panel highlighted. Is there a way to remove that selection or highlighting? – nick May 10 '13 at 14:59
And if I want to collapse a specific panel (not all panels), how can I do it? – Willy Feb 24 '21 at 14:49
@Ralph, I think that this is a different question. Did you try to ask it as a new? This way you will have a broader audience and, likely, an answer much faster. – OnaBai Feb 25 '21 at 00:02

score 1 · Answer 2 · answered Sep 09 '14 at 04:34

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"]'));

score 0 · Answer 3 · answered Jan 09 '17 at 12:32

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
            });

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

3 Answers3