altRowTemplate String|Function

The template which renders the alternating table rows. By default the treelist 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. Set the class of the table row to k-alt to get the default "alternating" look and feel.

Example - specify alternating 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>