Detail Row Template

The detail row template of the Grid enables you to provide additional details about a particular row of table data through expanding or collapsing its content.

• The detail row template does not work with locked columns.
• To use the detail row template in virtual scrolling, set the detailRowHeight option.
• For the specifics of exporting the detail row template to Excel, refer to the section on known limitations.

Getting Started

To define the detail template, nest an <ng-template> tag with the kendoGridDetailTemplate directive inside the <kendo-grid> tag. The template context is set to the current dataItem and the following additional fields are passed:

• dataItem—Defines the current data item.
• rowIndex—Defines the current row index.

Conditional Display

The Kendo UI Grid for Angular enables you to configure whether a given row is displayed or not. To indicate if a detail row will be displayed, specify the DetailTemplateShowIfFn setting.

Copy Code   <div *kendoGridDetailTemplate="let dataItem, let rowIndex = rowIndex; showIf: myCondition">
      <category-details [category]="dataItem"></category-details>
   </div>

The following example demonstrates how to use DetailTemplateShowIfFn with the <ng-template> element.

Copy Code   <ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex"
      [kendoGridDetailTemplateShowIf]="myCondition">
       <category-details [category]="dataItem"></category-details>
   </ng-template>

The following example demonstrates a runnable implementation of DetailTemplateShowIfFn.

Suggested Links

• DetailTemplateDirective
• API Reference of the GridComponent
• API Index of the Grid