All Components


Represents the column cell template of the Kendo UI Grid which helps to customize the content of the cells.

To define the cell template, nest a <template> tag with the kendoCellTemplate directive inside <kendo-grid-column>.

The template context is set to the current data item and the following additional fields are passed:

  • columnIndex—The current column index.
  • rowIndex—The current row index.
  • dataItem—The current data item.
  • column—The current column instance.

    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData">
            <kendo-grid-column field="ProductName">
                <template kendoCellTemplate let-dataItem let-rowIndex="rowIndex">
                    Row: {{rowIndex}} /
                    ({{dataItem.Discontinued ? "discontinued" : "active"}})

class AppComponent {
    public gridData = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": true



In this article