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.

 @Component({
   selector: 'my-app',
   template: `
       <kendo-grid
         [data]="data"
         selectable="true"
         style="height: 160px"
         >
         <kendo-grid-column field="ProductID"></kendo-grid-column>
         <kendo-grid-column field="ProductName"></kendo-grid-column>
         <kendo-grid-column field="UnitPrice"></kendo-grid-column>
         <ng-template kendoGridDetailTemplate let-dataItem
              [kendoGridDetailTemplateShowIf]="showOnlyBeveragesDetails">
           <div *ngIf="dataItem.Category">
             <header>{{dataItem.Category?.CategoryName}}</header>
             <span>{{dataItem.Category?.Description}}</span>
           </div>
         </ng-template>
       </kendo-grid>
   `
 })
 class AppComponent {
     public data = [{
         "ProductID": 1,
         "ProductName": "Chai",
         "UnitPrice": 18.0000,
         "Discontinued": false,
         "Category": {
             "CategoryID": 1,
             "CategoryName": "Beverages",
             "Description": "Soft drinks, coffees, teas, beers, and ales"
         }
       }, {
         "ProductID": 2,
         "ProductName": "Chang",
         "UnitPrice": 19.0000,
         "Discontinued": false,
         "Category": {
             "CategoryID": 1,
             "CategoryName": "Beverages",
             "Description": "Soft drinks, coffees, teas, beers, and ales"
         }
       }, {
         "ProductID": 3,
         "ProductName": "Aniseed Syrup",
         "UnitPrice": 10.0000,
         "Discontinued": false,
         "Category": {
             "CategoryID": 2,
             "CategoryName": "Condiments",
             "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
         }
     }];

     public showOnlyBeveragesDetails(dataItem: any, index: number): boolean {
        return dataItem.Category.CategoryID === 1;
     }
 }

In this article

Not finding the help you need?