DetailTemplateDirective

Updated on Nov 24, 2025

Represents the detail template of the Grid (more information and examples). Nest an <ng-template> tag with the kendoGridDetailTemplate directive inside a <kendo-grid> tag to define the detail template.

html

<kendo-grid [data]="data" selectable="true" style="height: 160px">
   <kendo-grid-column field="ProductName"></kendo-grid-column>
   <ng-template kendoGridDetailTemplate let-dataItem>
      @if (dataItem.Category) {
        <div>
           <header>{{dataItem.Category?.CategoryName}}</header>
           <span>{{dataItem.Category?.Description}}</span>
        </div>
      }
   </ng-template>
</kendo-grid>

Selector

[kendoGridDetailTemplate]

Inputs

Name	Type	Default	Description
kendoGridDetailTemplateShowIf	DetailTemplateShowIfFn		Sets a function to decide if the detail row and the Expand or Collapse button display for a data item. The function receives the data item and its index.