# Template Columns

Template columns let you customize how the Grid displays data in each cell.

The following example shows how to define a custom column layout with images and field values from the data source. The templates use JavaScript functions.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Customer>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).Width(140).ClientTemplate("#=template(data)#");
            columns.Bound(c => c.ContactTitle).Width(190);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.Country).Width(110);
        })
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
        )
    )

    <script>
        function template(data) {
            return `<div class='customer-photo'
                    style='background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/${data.CustomerID}.jpg);'></div>
                    <div class='customer-name'>${data.ContactName}</div>`;
        }
    </script>
```

Use the following CSS to style the image and text in the template column.

```CSS Styles
<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>
```

## See Also

* [Bound Column Settings](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/overview)
* [Implementing Template Columns in the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/column-template)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)