New to Kendo UI for Angular? Start a free 30-day trial

ColumnHeaderCellTemplateDirective

Represents the column header cell template of the PivotGrid. Helps to customize the content of the column header cells. To define the column header cell template, nest an <ng-template> tag with the kendoPivotGridColumnHeaderCellTemplate directive inside a <kendo-pivot-grid> tag see example.

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

  • cellItem—The current cell item. Represents the default context that will be assigned to any template variable which utilizes the let-x syntax—for example, let-cellItem.
  • 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.
  • expanded—The expanded state of the cell. Use it as an alias for a template variable by utilizing the let-expanded="expanded" syntax.
  • tableType—The table type. Use it as an alias for a template variable by utilizing the let-tableType="tableType" syntax.
  • text—The default cell text. Use it as an alias for a template variable by utilizing the let-text="text" syntax.
<kendo-pivot-grid [data]="data" ...>
    <ng-template kendoPivotGridColumnHeaderCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
      Row: {{rowIndex}}
    </ng-template>
</kendo-pivot-grid>

Selector

[kendoPivotGridColumnHeaderCellTemplate]

In this article

Not finding the help you need?