rowTemplate String|Function

The template which renders rows. By default renders a table row (<tr>) for every data source item.

The outermost HTML element in the template must be a table row (<tr>). That table row must have the uid data attribute set to #= uid #. The treelist uses the uid data attribute to determine the data to which a table row is bound to.

Example - specify row template as a function

    <div id="treelist"></div>
    <script id="template" type="text/x-kendo-template">
        <tr data-uid="#= data.model.uid #">
            <td colspan="2">
                #for(var i = 0; i < (hasChildren ? level : (level + 1)); i++){#
                    <span class="k-icon k-i-none"></span>
                #}#
                #if(data.hasChildren){#
                    <span class="k-icon k-i-#=data.model.expanded? 'collapse' : 'expand'#"></span>
                #}#

                <strong>#: data.model.lastName # </strong>
                <strong>#: data.model.position #</strong>
            </td>
        </tr>
    </script>
    <script id="altTemplate" type="text/x-kendo-template">
        <tr data-uid="#= data.model.uid #" class="k-alt">
            <td colspan="2">
                #for(var i = 0; i < (hasChildren ? level : (level + 1)); i++){#
                    <span class="k-icon k-i-none"></span>
                #}#
                #if(data.hasChildren){#
                    <span class="k-icon k-i-#=data.model.expanded? 'collapse' : 'expand'#"></span>
                #}#

                <strong>#: data.model.lastName # </strong>
                <strong>#: data.model.position #</strong>
            </td>
        </tr>
    </script>
    <script>
      $("#treelist").kendoTreeList({
        rowTemplate: kendo.template($("#template").html()),
        altRowTemplate: kendo.template($("#altTemplate").html()),
        columns: [
          { field: "lastName" }
        ],
        dataSource: {
          data: [
            { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
            { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" },
            { id: 3, parentId: 2, lastName: "Jason", position: "Director, Engineering" }

          ]
        }
      });
    </script>
In this article
Not finding the help you need? Improve this article