Replace all panels (or a different approach)

[Brendan]

I'm working on a mobile app where the user selects a Shop in the first view and then the second view displays an Order form specific to that shop.  

The order form can be quite long (100's of products) so my plan is to only show product categories as PanelBar items and then load the products for that category (on demand) when the user expands the PanelBar item. Only one Category panel would be expanded at a time to keep the order form manageable on the screen.

My question is about how to replace the PanelBar data when the user goes back and selects another Shop (ie I'm loading a different order form)?  Removing all items seems to work fine but I can't seem to append the new items to the panel bar if it is empty?

Am I missing something or can anyone suggest a better approach?  I've got this working with a JQuery UI Accordian and KnockoutJS but performance is a little average - so I'm trying Kendo as an alternative.

Thanks for any comments.

[Alexander Valchev]

Hello Brendan,

There is a problem with the append method of the PanelBar in the official release, but the issue was addressed and is already fixed in the latest internal build.

Alternatively you could remove the whole widget and recreate it. In order to destroy the PanelBar I recommend to call the empty method on the html element from which it is initialized. For example:

<ul id="panelbar"></ul>

$("#panelbar").empty()

Regards,
Alexander Valchev
the Telerik team

[Brendan]

Thanks for the reply Alexander.  That's as good a reason to buy a commercial license as any - and I've just finished doing just that! 

I look forward to working with yourself and the Kendo team.

Cheers,
Brendan.