New to Telerik UI for ASP.NET Core? Download free 30-day trial

Column Templates

The Grid renders table rows (tr) which represent the data source items.

For runnable examples, refer to:

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>

See Also

In this article