Column Templates
The Grid renders table rows (tr) which represent the data source items.
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
Each table row consists of table cells (td) which represent the Grid columns. By default, the Grid displays the HTML-encoded value of the field in the column.
The following example demonstrates how to set the template as a string and wrap the column value in HTML.
.Columns(c =>
{
c.Bound(f => f.ShipCountry).ClientTemplate("<strong>#= ShipCountry # </strong>");
})
<columns>
<column field="ShipCounty" template="<strong>#= ShipCountry # </strong>"/>
</columns>
The following example demonstrates how to set column templates as a Kendo UI template. First compile the template, then pass it to the column.
<script type="kendo-template" id="my-template">
<em>#= ShipCountry # </em>
</script>
<script>
var myTemplate = kendo.template($('#my-template').html());
</script>
.Columns(c =>
{
c.Bound(f => f.ShipCountry ).ClientTemplate("#=myTemplate(data)#");
})
<script type="kendo-template" id="my-template">
<em>#= ShipCountry # </em>
</script>
<script>
var myTemplate = kendo.template($('#my-template').html());
</script>
<columns>
<column field="ShipCountry" template="#=myTemplate(data)#"/>
</columns>
The following example demonstrates how to set a column template as a function.
.Columns(c =>
{
c.Bound(f => f.Products).ClientTemplate("#=showProducts(data)#");
})
<script>
function showProducts(data) {
if (data.Products) {
var template = "<ul>";
for (var i = 0; i < data.Products.length; i++) {
var product = data.Products[i];
template += kendo.format("<li>Product: {0}, Price: {1:c} </li>", product.ProductName, product.Price) ;
}
template += "</ul>"
return template;
}
}
</script>
<columns>
<column field="Products" template="#=showProductsTemplate(data)#"/>
</columns>