Introduction
Contribution
Knowledge Base
Grid

rowTemplateString|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 string literal 

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

Check Row template for a live demo.

In this article
rowTemplate
Not finding the help you need?
Contact Support