New to Kendo UI for Angular? Start a free 30-day trial
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 thelet-columnIndex="columnIndex"
syntax.rowIndex
—The current data row index. Use it as an alias for a template variable by utilizing thelet-rowIndex="rowIndex"
syntax.dataItem
—The current data item. Represents the default context that will be assigned to any template variable which utilizes thelet-x
syntax—for example,let-dataItem
.column
—The current column instance. Use it as an alias for a template variable by utilizing thelet-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]