HeaderTemplateDirective

Represents the column header cell template of the Grid (more information and example). Helps to customize the table header cell for the column. To define a header template, nest an <ng-template> tag with the kendoGridHeaderTemplate directive inside the <kendo-grid-column> tag.

The template context is set to the current column and then the following additional fields are passed:

• column—Defines an instance of the ColumnComponent option.
• columnIndex—Defines the current column index.

Copy Code<kendo-grid [data]="gridData">
   <kendo-grid-column field="ProductName">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
         {{column.field}}({{columnIndex}})
      </ng-template>
   </kendo-grid-column>
</kendo-grid>

Selector

[kendoGridHeaderTemplate]