DetailTemplateDirective

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

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		Defines the function that indicates if a given detail row and the associated Expand or Collapse button will be displayed.