क्या एक कार्रवाई पर केंडो पैनलबार के सभी पैनलों को ध्वस्त करने का कोई तरीका है?

Question

मैं एक ऐप पर काम कर रहा हूं जहां मैं जेएसपी रैपर का उपयोग करके पैनलबार (मल्टीसेक्शन) जोड़ रहा हूं (जिसका मतलब है कि प्रत्येक पैनल में कोई आईडी नहीं है), और अंदर के अंदर ग्रिड हैं।

ग्रिड चयनित व्यक्ति के लिए विशिष्ट डेटा संग्रहीत कर रहे हैं, जो पृष्ठ के शीर्ष पर सूची आइटम (छवियों) के रूप में प्रदर्शित होते हैं।

मैं क्या करना चाहता हूं कि जब उपयोगकर्ता व्यक्ति के चयन को वर्तमान में दूसरे से चुनता है, तो केंडो पैनलबार के सभी पैनलों को ध्वस्त कर देता है। इससे नए व्यक्ति के डेटा को पुनः लोड करने में मदद मिलेगी, क्योंकि जब उपयोगकर्ता डेटा देखने के लिए पैनल का चयन/विस्तार करेगा, तो मैं ईवेंट को पकड़ूंगा और चयनित व्यक्ति के आधार पर ग्रिड को एक नए डेटासोर्स के साथ पुनः लोड करूंगा।

मुझे आशा है कि मैं यहां समझूंगा, लेकिन मुझे यकीन नहीं है कि पैनलबार के सभी पैनलों को कैसे ध्वस्त किया जाए।

कोई सुझाव ??

Answer 1

, यदि आपका PanelBar की idpanel है:

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

या

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

अर्थात हम करेंगे collapse#panelbar के तहत हर li तत्व।

संपादित: यदि आप चयन को निकालना चाहते हैं, जोड़ें:

$(".k-state-selected", panelbar.element).removeClass("k-state-selected"); 

Answer 2

एचटीएमएल

<ul id="palettePanelBar"> 
      <li id="item1" class="k-state-active"> 
       <!--Some Data--> 
      </li> 
      <li id="item2"> 
       <!--Some Data for second item--> 

      </li> 
</ul> 

जावास्क्रिप्ट

var panelBar = $("#palettePanelBar").data("kendoPanelBar"); 
    panelBar.expand($('[id^="item"]')); 

Answer 3

आप सभी पैनल को बचाने में इस ब्लॉक का उपयोग कर सकते और उत्तर के लिए बोनस के रूप में, आप केवल बाद में चयनित का विस्तार कर सकते हैं टी इस तरह से:

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