剣道Panelbarのすべてのパネルを崩壊させる方法はありますか？

Question

私は、JSPラッパー（各パネルにIDがないことを意味します）を使用してパネルバー（マルチセレクション）を追加するアプリケーションに取り組んでいます。

グリッドは、選択した人物に固有のデータを格納しており、ページの上部にリスト項目（画像）として表示されます。

私がしたいのは、現在選択されているものから別のものへと人の選択を変更すると、剣道のパネルのすべてのパネルが折りたたまれてしまうことです。これは、新しい人物のデータをリロードするのに役立ちます。なぜなら、ユーザーがパネルを選択/展開してデータを表示すると、選択した人物に基づいてイベントを捕捉し、グリッドを新しいデータソースで再ロードするからです。

私はここで理にかなっていることを望みますが、PanelBarのすべてのパネルを折りたたむ方法がわかりません。

任意の提案??

Answer 1

あなたPanelBarのidがpanelある場合は、操作を行います。

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

または

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

すなわち我々は collapse #panelbar下にあるすべての li要素。

EDIT：あなたが選択を削除したい場合は、追加：

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

答えにボーナスとして、あなたは選択されたtha以降のものだけを展開することができますこのようにして：

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