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

DetailTemplateDirective

Directive

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.

Definition

Package:@progress/kendo-angular-grid

Selector:[kendoGridDetailTemplate]

Syntax:

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>

Inputs

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.