Czy istnieje sposób na zwinięcie wszystkich paneli Kendo Panelbar, w akcji?

Question

Pracuję nad aplikacją, w której dodaję panele (multiselection) za pomocą JSP Wrapper (co oznacza brak identyfikatora do każdego z paneli), a wewnątrz są siatki.

Siatki przechowują dane charakterystyczne dla wybranej osoby, które są wyświetlane jako elementy listy (obrazy) na górze strony.

Co chcę zrobić, to gdy użytkownik zmienia wybór osoby, z aktualnie wybranego na inny, zwinąć wszystkie panele panelu kendo. Pomogłoby to w ponownym załadowaniu danych nowej osoby, ponieważ kiedy użytkownik wybierze/rozszerzy panel, aby zobaczyć dane, złapię to zdarzenie i ponownie załaduję siatkę z nowym źródłem danych, w oparciu o wybraną osobę.

Mam nadzieję, że mam tutaj sens, ale nie jestem pewien, jak zwinąć wszystkie panele PanelBar.

Wszelkie sugestie?

Answer 1

Jeśli id twoich PanelBar jest panel, zrobić:

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

lub

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

tj będziemy collapse każdy li elementem pod #panelbar.

EDIT: Jeśli chcesz, aby usunąć zaznaczenie, dodać:

$(".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

Można użyć tego bloku, aby zwinąć cały panel i jako bonus do odpowiedzi, możesz rozwinąć tylko wybraną po tha t w ten sposób:

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