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 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