c'è un modo per comprimere tutti i pannelli di Kendo Panelbar, su un'azione?

Question

Sto lavorando su un app dove sto aggiungendo panelbars (multipla) utilizzando JSP Wrapper (che non significa ID per ciascuno dei pannelli), e dentro quelli hanno le griglie.

Le griglie sono la memorizzazione di dati specifici per la persona selezionata, che vengono visualizzati come elementi della lista (immagini) sulla parte superiore della pagina.

Quello che voglio fare è che quando l'utente cambia la selezione di persone, dagli attuali selezionato in un altro, crollare tutti i pannelli della PanelBar kendo. Ciò aiuterebbe a ricaricare i dati della nuova persona, perché quando l'utente selezionerà/esporrà il pannello per vedere i dati, prenderei l'evento e ricaricherò la griglia con una nuova origine dati, basata sulla persona selezionata.

spero di dare un senso qui, ma io non sono sicuro di come comprimere tutti i pannelli della PanelBar.

Dei suggerimenti ??

Answer 1

Se il id del PanelBar è panel, do:

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

o

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

vale a dire lo faremo collapse ogni li elemento sotto #panelbar.

EDIT: Se si desidera rimuovere la selezione, aggiungere:

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

È possibile utilizzare questo blocco a crollare tutto pannello e come bonus alla risposta, puoi espandere solo la selezione dopo quella t in questo modo:

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