Today I was working on a particular part of a financial application that required a Kendo Panelbar and a Kendo Grid in the first panel.

I also wanted the first panel to be expanded by default so I added the class ‘k-state-active’ to the first LI element of the unordered list (UL) that I was using as the Panel Bar. Doing this however resulted in the oddest behaviour where the opened Kendo Panelbar panel reloaded the entire site inside it.

I tried a number of things, which didn’t work, but eventually came to the following solution:

My Kendo Panelbar Solution:

In my code I was calling the Kendo Panel Bar followed immediately by the call to initialize the Kendo Grid. I haven’t had any feedback from Telerik yet, but it seems there’s an issue with doing this. So I adjusted my code to initialize the Kendo Grid only when the Kendo Panelbar had completed the expanding process.

$('#ulElement')kendoPanelBar({
    expand: function (e) {
        //write code here
    }
});

The code above shows how I went about doing this. In the expand event I added a call to a JavaScript function which initialized the grid.