text/x-kendo-tmpl template, data-uid binds to each root level tags in template

2 posts, 1 answers
  1. Richard
    Richard avatar
    145 posts
    Member since:
    Feb 2012

    Posted 13 Sep 2017 Link to this post

    Dojo example: http://dojo.telerik.com/@RichardAD/AkuLUw/5

    I am experiencing a strange template issue.

    A kendoListView configured with a data source having 6 items (from an array) and a script based text/x-kendo-tmpl template.  The template has 3 'top level' sibling html tags like span and div.  The listview renders all six elements.  The first six rendered top level tags get a role=option and data-uid= corresponding to the six data source items.  This means the first two renders use all the data-uid and the remaining four get none.


    java script array

    var mappedtag_taglist =
        [ { "ID": 100, "Name": "Razor View" }
        , { "ID": 101, "Name": "JQuery"}
        , { "ID": 102, "Name": "MS Sql"}
        , { "ID": 103, "Name": "My Sql"}
        , { "ID": 104, "Name": "Ruby"}
        , { "ID": 105, "Name": "SQL"}


    data source config

    var   mappedtag_datasource = new kendo.data.DataSource({data:   mappedtag_taglist});


    listview config

        dataSource: mappedtag_datasource,
        template: kendo.template($("#mappedtagtemplate").html())


    template as script

    <script type="text/x-kendo-tmpl" id="mappedtagtemplate">
    <span>1st template root level content</span>
    <span>2nd template root level content</span>
    <div>3rd template root level content
      <div class="tagitem k-block"> #:Name#</div>
      <span class="k-button item-close" data-id="#:ID#">
          <span class="k-icon k-i-close"></span>


    Is this expected behavior by the template compiler ?  I can't find any documentation, demos, examples or posts discussing this issue.

    My preference would be to add my own data-uid="#=data.uid#" to some component in the script, and have the template in the script be utilized once per item.

    Since my experience is that all items are rendered, it is just how the data-uid= gets added to the render is peculiar.






  2. Answer
    Tsvetina avatar
    2133 posts

    Posted 18 Sep 2017 Link to this post

    Hello Richard,

    This is expected behavior, because the databound widgets expect that the template has a single root-level element, as noted in the ListView walkthrough article. The issue that you describe will be resolved if you wrap your three root-level elements in a single container element, which will be the new root of the template.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top