Issue with PanelBar having a Grid as content

[Shaun]

Hello,

I have a treeview populated with some data. 
When you click on a node, it fires an ajax request and populates a PanelBar with the content.
each panel bar item then fires another request when clicked to load more data into a grid.

The issue is that on each click on a panel bar item, only one ajax request should fire. 
So click on a node in tree, you see the panel bar, click on an item and one request fires for the grid.
Click on another item in the tree, click on panel bar and then 2 requests fire.
click a third time and we'll notice 3 requests firing.

Somehow there seems to be a relation between how many calls the panel bar triggers and how many items in the tree were clicked.
I attached a test project to demonstrate the issue. 

Any idea why more than 1 request is fired when clicking on a PanelBar item and what can  I do to stop it ?

[Daniel]

Hello,

Multiple requests are being made because the panelbar is initialized each time without destroying the old one. You should either destroy the panelbar when it has already been initialized:

var panelBarElement = $("#instancesPanelBar"),
    panelBar = panelBarElement.data("kendoPanelBar");
if (panelBar) {
    panelBar.destroy();
}

panelBarElement.kendoPanelBar({
    dataSource: dsGrid
});

or just replace its dataSource:

var panelBarElement = $("#instancesPanelBar"),
    panelBar = panelBarElement.data("kendoPanelBar");
if (panelBar) {
    panelBar.setOptions({ dataSource: dsGrid });
}
else {
    $("#instancesPanelBar").kendoPanelBar({
        dataSource: dsGrid
    });
}

Regards,
Daniel
Telerik

[Shaun]

it worked fine.

Thank you Daniel