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 class="k-table-row" data-uid="#= data.model.uid #" role="row" >
            <td class="k-table-td" colspan="2">
                #for(var i = 0; i < (hasChildren ? level : (level + 1)); i++){#
                    <span class="k-icon k-i-none"></span>
                    #}#
                    # if (data.hasChildren) { #
                    # if(data.model.expanded) { #
                      #= kendo.ui.icon("caret-alt-down") #
                    # } else { #
                      #= kendo.ui.icon("caret-alt-right") #
                    # } #
                    # } #
                <strong>#: data.model.lastName # </strong>
                <strong>#: data.model.position #</strong>
            </td>
        </tr>
    </script>
    <script id="altTemplate" type="text/x-kendo-template">
      <tr class="k-table-row k-alt" data-uid="#= data.model.uid #" role="row" >
          <td class="k-table-td" colspan="2">
              #for(var i = 0; i < (hasChildren ? level : (level + 1)); i++){#
                <span class="k-icon k-i-none"></span>
                #}#
                # if (data.hasChildren) { #
                # if(data.model.expanded) { #
                    #= kendo.ui.icon("caret-alt-down") #
                # } else { #
                    #= kendo.ui.icon("caret-alt-right") #
                # } #
                # } #
              <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>