rowTemplate String|Function

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

There are a few important things to keep in mind when using rowTemplate.

• 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 grid uses the uid data attribute to determine the data to which a table row is bound to.
• If rowTemplate is used alongside with detailTemplate, the row (<tr>) element needs to have class k-master-row. The first <td> element of the row needs to have class k-hierarchy-cell. Check the Row Templates documentation for more information.

Example - specify row template as a function

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
    rowTemplate: function(dataItem){
      return "<tr data-uid=" + dataItem.uid + "><td colspan='1'><strong>" + dataItem.name + "</strong></td><td colspan='1'><strong>" + dataItem.age + "</strong></td></tr>";
    }
  });
</script>

Example - specify row template as a function with Kendo template

<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td colspan="1">
            <strong>#: name #</strong>
        </td>
        <td colspan="1">
          <strong>#: age #</strong>
        </td>
    </tr>
</script>
<script>
$("#grid").kendoGrid({
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  rowTemplate: kendo.template($("#template").html())
});
</script>

Example - specify row template as a string

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
  rowTemplate: '<tr data-uid="#= uid #"><td colspan="1"><strong>#: name #</strong></td><td colspan="1"><strong>#: age #</strong></td></tr>'
});
</script>

Check Row template for a live demo.