에는 Kendo Panelbar의 모든 패널을 축소 할 수있는 방법이 있습니까?

Question

나는 각 패널에 ID가없는 것을 의미하는 JSP 래퍼를 사용하여 패널 막대 (다중 선택)를 추가하는 응용 프로그램에서 작업 중이며 그 안에 격자가 있습니다.

그리드는 선택한 사람에게 특정한 데이터를 저장하며, 페이지 맨 위에 목록 항목 (이미지)으로 표시됩니다.

내가 원하는 것은 사용자가 현재 선택에서 다른 선택으로 사람의 선택을 변경하면 검도 패널 막대의 모든 패널을 접습니다. 사용자가 데이터를보기 위해 패널을 선택/확장 할 때 선택한 사람을 기반으로 새로운 데이터 소스로 이벤트를 포착하고 그리드를 다시로드하기 때문에 새 사용자의 데이터를 다시로드하는 데 도움이됩니다.

여기에 맞는 것이 좋겠지 만 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 요소입니다.

편집 : 당신은 선택을 제거 할 경우, 추가

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

자바 스크립트

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

Answer 3

그리고 대답에 보너스로, 당신은 단지 그 이후의 선택을 확장 할 수 있습니다 이렇게하면 t :

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