CellTemplateDirective

Represents the column cell template of the Grid (more information and example).
Helps to customize the content of the cells. To define the cell template, nest an <ng-template> tag
with the kendoGridCellTemplate directive inside a <kendo-grid-column> tag.

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

  • columnIndex—The current column index. Use it as an alias for a template variable by utilizing the let-columnIndex="columnIndex" syntax.
  • rowIndex—The current data row index. Use it as an alias for a template variable by utilizing the let-rowIndex="rowIndex" syntax.
  • dataItem—The current data item. Represents the default context that will be assigned to any template variable which utilizes the let-x syntax—for example, let-dataItem.
  • column—The current column instance. Use it as an alias for a template variable by utilizing the let-column="column" syntax.
@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData">
            <kendo-grid-column field="ProductName">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                    Data Row #: {{rowIndex}} /
                    <strong>{{dataItem.ProductName}}</strong>
                    ({{dataItem.Discontinued ? "discontinued" : "active"}})
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `
})

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

Selector

[kendoGridCellTemplate]