DetailTemplateDirective

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>
      <div *ngIf="dataItem.Category">
         <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.