Grid toolbar MVVM doesn't work

4 posts, 0 answers
  1. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 04 Apr Link to this post

    The toolbar template here does not work when everything to be known about kendo and templates, suggest it should.

    Can anyone explain why the MVVM toolbar here is an invalid template? Especially given the data-editable element below, works perfectly, suggesting everything is as it should be.

    ...

    data-toolbar="[{ template: kendo.template($('\\#user-list-toolbar-template').html()) }]" 
    data-editable="{ mode: 'popup', template: kendo.template($('\\#user-edit-dialog-template').html()) }"

     

    <script id="user-list-toolbar-template" type="text/x-kendo-template">
    <a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"></span>A</a>
    <a class="k-button k-button-icontext add-ad-user" href="#"><span class="k-icon k-add"></span>B</a>
    </script>

     

    <script id="user-edit-dialog-template" type="text/kendo-ui-template">

    ... this one works, no issues, no need to see anymore

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 06 Apr Link to this post

    Hello Peter,

    The data-template attribute accepts a string representing the template ID. For example:

    data-toolbar="user-list-toolbar-template"



    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 06 Apr in reply to Alexander Valchev Link to this post

    Perhaps I'm on an older version Kendo UI v2015.3.1214

    Doing as you suggest, simply shows the string "user-list-toolbar-template" in the toolbar.

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 08 Apr Link to this post

    Hi Peter,

    My previous reply was misleading. Please accept my apology!

    The way template is defined is indeed correct. The invalid template error occurs because there are unescaped hash symbols (#) in the template.

    <script id="user-list-toolbar-template" type="text/x-kendo-template">
      <a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"></span>A</a>
      <a class="k-button k-button-icontext add-ad-user" href="#"><span class="k-icon k-add"></span>B</a>
    </script>


    The template should look like:

    <a class="k-button k-button-icontext k-grid-add" href="\#"><span class="k-icon k-add"></span>A</a>
    <a class="k-button k-button-icontext add-ad-user" href="\#"><span class="k-icon k-add"></span>B</a>


    I also prepared a working test page: http://dojo.telerik.com/AzULE

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready