Kendo UI PanelBar 有条件展开

Question

我需要有关 Kendo UI PanelBar 的帮助。

我有 3 个部分（3 个面板栏）。

• 面板 1
• 面板 2
• 面板 3

这是一个单一的展开模式。因此，您单击一个面板，然后所有其他面板都会折叠，而您单击的面板会展开。

但是，我想添加一个条件，如果面板 1 中存在无效数据，则无法展开面板 2 或 3。

你是怎么做到的？

Answer 1

当 panel bar 的项目展开时，您有一个事件要捕获，您可以使用 e.preventDefault():

像这样：

 var onExpandEvt = function(e) {
    // access the expanded item via e.item (HTMLElement)
    // here you can put your verification......
    //if(validationFailed){
    //    e.preventDefault();
    //}
    // detach expand event handler via unbind()
    panelBar.data("kendoPanelBar").unbind("expand", onExpandEvt );
};

// attach expand event handler during initialization
var panelBar = $("#panelbar").kendoPanelBar({
    expand: onExpandEvt 
});