rowTemplate String|Function

The template which renders rows. Be 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 grid 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="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='2'><strong>" + dataItem.name + "</strong><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="2">
            <strong>#: name #</strong>
            <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="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'
});
</script>

Check Row template for a live demo.