Edit this page

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy