Row Templates
The Kendo UI Grid supports row templates which enable you to place custom content into a Grid row.
When you use a ClientRowTemplate, the template defines the complete <tr> and <td> markup. To center a cell, add a class or an inline text-align style directly to the relevant <td> element.
.ClientRowTemplate("<tr data-uid='#=data.uid#'>" +
"<td class='toppane-input-wrap'>#=data.OrderID#</td>" +
"<td class='toppane-input-wrap'>#=data.ShipCountry#</td>" +
"</tr>")The toppane-input-wrap class in this example is a custom application class, not a Kendo UI class. For standard generated Grid cells, use the column alignment options described in the content alignment article.
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 which data a table row is bound to.
.ClientRowTemplate("<tr data-uid='#=data.uid#'>" +
"<td>#=data.OrderID#</td>" +
"<td><strong>#=ShipCountry #</strong></td>" +
"</tr>")