New to Kendo UI for AngularStart a free 30-day trial

CellTemplateDirective

Lets you customize the content of Grid cells. Place an <ng-template> tag with the kendoGridCellTemplate directive inside a <kendo-grid-column> tag to define the cell template. (See example).

The template context is set to the current data item. You can use these fields:

  • columnIndex—The current column index. Use let-columnIndex="columnIndex" in your template.
  • rowIndex—The current data row index. Use let-rowIndex="rowIndex" in your template.
  • dataItem—The current data item. This is the default context for any template variable that uses the let-x syntax, such as let-dataItem.
  • column—The current column instance. Use let-column="column" in your template.
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]

In this article
Selector
Not finding the help you need?
Contact Support