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 theuid
data attribute set to#= uid #
. The grid uses theuid
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.