gibt es eine Möglichkeit, alle Panels von Kendo Panelbar auf eine Aktion zu reduzieren?

Question

Ich arbeite an einer App, wo ich Panel-Bars (Multiselection) mit JSP Wrapper hinzufügen (was bedeutet, dass keine ID zu jedem der Panels), und innerhalb dieser haben die Gitter.

Die Raster speichern spezifische Daten für die ausgewählte Person, die als Listenelemente (Bilder) oben auf der Seite angezeigt werden.

Was ich tun möchte ist, dass, wenn Benutzer die Auswahl der Person ändert, von der aktuellen ausgewählten zu einer anderen, alle Panels der Kendo Panelbar. Dies würde beim erneuten Laden der Daten der neuen Person helfen, denn wenn der Benutzer das Panel auswählt/erweitert, um die Daten zu sehen, würde ich das Ereignis abfangen und das Gitter mit einer neuen Datenquelle basierend auf der ausgewählten Person neu laden.

Ich hoffe, dass ich hier Sinn, aber ich bin mir nicht sicher, wie alle Panels der PanelBar zu reduzieren.

Irgendwelche Vorschläge ??

Answer 1

Wenn die id Ihrer PanelBarpanel, sind:

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

oder

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

das heißt wir werden collapse jedes li Element unter #panelbar.

EDIT: Wenn Sie die Auswahl entfernen möchten, fügen Sie:

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

Sie diesen Block können alle Panel zum Einsturz und als ein Bonus auf die Antwort können Sie nur die ausgewählten nach Tha erweitern t auf diese Weise:

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