New to Kendo UI for Angular? Start 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. Uselet-columnIndex="columnIndex"
in your template.rowIndex
—The current data row index. Uselet-rowIndex="rowIndex"
in your template.dataItem
—The current data item. This is the default context for any template variable that uses thelet-x
syntax, such aslet-dataItem
.column
—The current column instance. Uselet-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]