panelBar inside listView templates

[dee]

Hi,

I have a panelBar for each of the listView templates:

• panelbarView for viewTemplate
• panelbarEdit  for  editTemplate

I am switching listview from view to edit mode programatically (on a button click):

window.listView.edit(window.listView.element.children().first());
window.panelBarEdit = $("#panelbarEdit").kendoPanelBar().data("kendoPanelBar");

However there's a problem with that, cause initial binding seems not to be working anymore after I called .kendoPanelBar()!?

Is there any way I can make it preserving the initial binding even in edit mode?

Note: The reason I did not go with only one panelBar, instead of having a separate one for each view and edit mode, is that in that case I do not have a control over panelBar elements from the datasource which I want to do - like hiding/showing panelBar custom link button based on a flag.

 

 

 

[dee]

Please checkout an example:
http://dojo.telerik.com/@dee/IrAMU/5

that I put up quickly.
Comment out the line: //panelBarEdit = $("#panelbarEdit").kendoPanelBar().data("kendoPanelBar");
and see what is going on.

Thanks!

[Daniel]

Hello,

You need to initialize the widget before the edit model is bound to the edit template. This can be done either by using the data attribute initialization:

<ul id="panelbarEdit" class="panelBar" data-role="panelbar">

or by using script inside the edit template:

<script type="text/x-kendo-tmpl" id="editTemplate">
    ...
    <script>
        $("\#panelbarEdit").kendoPanelBar()
    <\/script>
</script>

Regards,
Daniel
Telerik by Progress