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

Detail Row Template

The detail row template of the Angular 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.

Change Theme

Theme

Loading ...

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.

   <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.

   <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.