Column Templates

The Kendo UI 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 examples demonstrate how to customize the way the column displays its value.

Setting Column Templates as Strings

The following example demonstrates how to set the template as a string and wrap the column value in HTML.

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [ {
        field: "name",
        template: "<strong>#: name # </strong>"
      }],
      dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    });
    </script>

Setting Column Templates as Functions

The following example demonstrates how to set the template as a function that is returned by kendo.template.

    <div id="grid"></div>
    <script id="name-template" type="text/x-kendo-template">
      <strong>#: name #</strong>
    </script>
    <script>
    $("#grid").kendoGrid({
      columns: [ {
        field: "name",
        template: kendo.template($("#name-template").html())
      }],
      dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    });
    </script>

The following example demonstrates how to set the template as a function which returns a string.

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [ {
        field: "name",
        template: function(dataItem) {
          return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
        }
      }],
      dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    });
    </script>

See Also

In this article
Not finding the help you need? Improve this article