panelBar inside listView templates

3 posts, 0 answers
  1. dee
    dee avatar
    4 posts
    Member since:
    Jul 2016

    Posted 11 Jul 2016 Link to this post


    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.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.




  2. dee
    dee avatar
    4 posts
    Member since:
    Jul 2016

    Posted 11 Jul 2016 in reply to dee Link to this post

    Please checkout an example:

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


  3. Daniel
    Daniel avatar
    2231 posts

    Posted 14 Jul 2016 Link to this post


    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">

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top