là có cách nào để thu gọn tất cả các bảng của Kendo Panelbar, trên một hành động?

Question

Tôi đang làm việc trên một ứng dụng mà tôi đang thêm bảng điều khiển (multiselection) bằng cách sử dụng JSP Wrapper (có nghĩa là không có ID cho mỗi bảng), và bên trong những người có lưới.

Lưới đang lưu trữ dữ liệu cụ thể cho người được chọn, được hiển thị dưới dạng mục danh sách (hình ảnh) ở đầu trang.

Điều tôi muốn làm là khi người dùng thay đổi lựa chọn người, từ lựa chọn hiện tại sang người khác, thu gọn tất cả các bảng của thanh điều khiển kendo. Điều này sẽ giúp tải lại dữ liệu của người mới, bởi vì khi người dùng sẽ chọn/mở rộng bảng điều khiển để xem dữ liệu, tôi sẽ nắm bắt sự kiện và tải lại lưới bằng Datasource mới, dựa trên người được chọn.

Tôi hy vọng tôi có ý nghĩa ở đây, nhưng tôi không chắc chắn cách thu gọn tất cả các bảng của PanelBar.

Bất kỳ đề xuất nào ??

Answer 1

Nếu id của PanelBar của bạn là panel, làm:

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

hoặc

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

ví dụ: chúng tôi sẽ collapse mỗi li yếu tố dưới #panelbar.

EDIT: Nếu bạn muốn loại bỏ các lựa chọn, thêm:

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

Bạn có thể sử dụng khối này sụp đổ tất cả các bảng điều khiển và như một phần thưởng cho câu trả lời, bạn có thể mở rộng chỉ được chọn sau khi tha t theo cách này:

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