Components / Grid / API / DetailTemplateDirective / 
New to Kendo UI for Angular? Start a free 30-day trial

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.

<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

NameTypeDefaultDescription

kendoGridDetailTemplateShowIf

DetailTemplateShowIfFn

Defines the function that indicates if a given detail row and the associated Expand or Collapse button will be displayed.

In this article

Not finding the help you need?

Contact Support