Kendo UI PanelBar Conditional Expand

Question

I need help with Kendo UI PanelBar.

I have 3 sections (3 Panel Bar's).

• Panel 1
• Panel 2
• Panel 3

It's a single expand mode. So you click on one panel then all other panels are collapsed and the one you clicked on expand.

However, I want to add a condition so that if there are invalid data in Panel 1, then you can't expand Panel 2 or 3.

How do you do that?

Answer 1

You have an event to catch when an item of panel bar is expanded and you can use e.preventDefault():

Like this:

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