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

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:

  • dataItemDefines the current data item.
  • rowIndexDefines the current row index.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?