CellTemplateDirective

Represents the column cell template of the Grid. 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 see example.

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.

html

<kendo-grid [data]="gridData" ...>
  <kendo-grid-column field="ProductName">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
      Data Row: {{rowIndex}}
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Selector

[kendoGridCellTemplate]