Row Templates
The Kendo UI Grid supports row templates which enable you to place custom content into a Grid row.
For runnable examples, refer to:
- Demo on using the row template of the Grid HtmlHelper for ASP.NET Core
- Demo on using the detail-row template of the Grid HtmlHelper for ASP.NET Core
- Demo on using the toolbar template of the Grid HtmlHelper for ASP.NET Core
The following example demonstrates how to use a string row template which generates two columns. 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.
.ClientRowTemplate("<tr data-uid='#=data.uid#'>" +
"<td>#=data.OrderID#</td>" +
"<td><strong>#=ShipCountry #</strong></td>" +
"</tr>")
@{
string rowTemplate = "<tr data-uid='#=data.uid#'>" +
"<td>#=data.OrderID#</td>" +
"<td><strong>#=ShipCountry #</strong></td>" +
"</tr>";
}
<kendo-grid name="grid" style="height:430px;"
row-template="@rowTemplate">
</kendo-grid>
