New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Column Templates

Updated over 6 months ago

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.

Razor


        .Columns(c =>
        {
            c.Bound(f => f.ShipCountry).ClientTemplate("<strong>#= ShipCountry # </strong>");
        })

The following example demonstrates how to set column templates as a Kendo UI template. First compile the template, then pass it to the column.

Razor

        <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)#");
        })

The following example demonstrates how to set a column template as a function.

Razor


        .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>

Column Templates

See Also