Detail template in Angular Grid component

1 Dec 202224 minutes to read

The detail template provides additional information about a particular row by expanding or collapsing detail content. The detailTemplate property accepts the template for the detail row.

import { Component, OnInit } from '@angular/core';
import { employeeData } from './datasource';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='315' width='auto'>
        <e-columns>
            <e-column field="FirstName" headerText='First Name' width='140'></e-column>
            <e-column field="LastName" headerText='Last Name' width='140'></e-column>
            <e-column field="Title" headerText='Title' width='150'></e-column>
            <e-column field="Country" headerText='Country' width='150'></e-column>
        </e-columns>
        <ng-template #detailTemplate let-data>
                    <table class="detailtable" width="100%">
                        <colgroup>
                            <col width="35%">
                            <col width="35%">
                            <col width="40%">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td class="photo" rowSpan="4" style="text-align : center">
                                    <img src=".png" alt="" />
                                </td>
                                <td>
                                    <span style="font-weight: 500">First Name:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> Postal Code:</span>
                                     
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-weight: 500">Last Name:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> City:</span>
                                     
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-weight: 500">Title:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> Phone:</span>
                                     
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-weight: 500">City:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> Country:</span>
                                     
                                </td>
                            </tr>
                        </tbody>
                    </table>
        </ng-template>
    </ejs-grid>`,
    styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {

    public data: object[];

    ngOnInit(): void {
        this.data = employeeData;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { DetailRowService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule        
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DetailRowService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Rendering custom component

To render the custom component inside the detail row, define the template in the detailTemplate and render the component in the detailDataBound event.

For example, to render grid inside the detail row, place an HTML div element as the detailTemplate and render the DIV element as grid component in the detailDataBound event.

import { Component, OnInit } from '@angular/core';
import { employeeData, data } from './datasource';
import { DetailDataBoundEventArgs, Grid } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='315' width='auto' (detailDataBound)='detailDataBound($event)'>
        <e-columns>
            <e-column field='FirstName' headerText='First Name' width='140'></e-column>
            <e-column field='LastName' headerText='Last Name' width='140'></e-column>
            <e-column field='Title' headerText='Title' width='150'></e-column>
            <e-column field='Country' headerText='Country' width='150'></e-column>
        </e-columns>
        <ng-template #detailTemplate let-data>
            <div class = 'custom-grid' ></div>
        </ng-template>
    </ejs-grid>`,
    styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {

    public data: object[];

    ngOnInit(): void {
        this.data = employeeData.slice(2, 5);
    }
    detailDataBound(e: DetailDataBoundEventArgs) {
        let detail = new Grid({
            dataSource: data.filter((item: Object) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3),
            columns: [
                { field: 'OrderID', headerText: 'Order ID', width: 110 },
                { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
            ]
        });
        detail.appendTo(e.detailElement.querySelector('.custom-grid'));
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { DetailRowService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule        
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DetailRowService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Expand by external button

By default, detail rows render in collapsed state. You can expand a detail row by invoking the expand method using the external button.

import { Component, OnInit, ViewChild } from '@angular/core';
import { employeeData } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    template: `<div class="e-float-input" style="width: 200px; display: inline-block;">
                   <input type="text" class="rowindex" value="0" />
                   <span class="e-float-line"></span>
                   <label class="e-float-text">Row Index</label>
                </div>
    <button ejs-button (click)="btnClick()">Expand</button>
    <ejs-grid #grid [dataSource]='data' height='315' width='auto'>
        <e-columns>
            <e-column field="FirstName" headerText='First Name' width='140'></e-column>
            <e-column field="LastName" headerText='Last Name' width='140'></e-column>
            <e-column field="Title" headerText='Title' width='150'></e-column>
            <e-column field="Country" headerText='Country' width='150'></e-column>
        </e-columns>
        <ng-template #detailTemplate let-data>
                    <table class="CardTable" cellpadding="3" cellspacing="2">
                        <colgroup>
                            <col width="35%">
                            <col width="35%">
                            <col width="40%">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td class="rowphoto" rowSpan="4" style="text-align : center">
                                    <img src=".png" alt="" />
                                </td>
                                <td>
                                    <span style="font-weight: 500">First Name:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> Postal Code:</span>
                                     
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-weight: 500">Last Name:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> City:</span>
                                     
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-weight: 500">Title:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> Phone:</span>
                                     
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="font-weight: 500">City:</span>
                                    
                                </td>
                                <td>
                                     <span style="font-weight: 500"> Country:</span>
                                     
                                </td>
                            </tr>
                        </tbody>
                    </table>
        </ng-template>
    </ejs-grid>`,
    styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {

    public data: object[];
    @ViewChild('grid')
    public grid: GridComponent;

    ngOnInit(): void {
        this.data = employeeData;
    }
    public btnClick(): void {
        let inputElem: HTMLInputElement = (document.getElementsByClassName('rowindex')[0] as HTMLInputElement);
        let rowIndex: number = parseInt(inputElem.value, 10);
        this.grid.detailRowModule.expand(rowIndex);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { DetailRowService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule        
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DetailRowService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Limitations for detail template

Detail template is not supported with the following features:

  • Frozen rows and columns
  • Immutable mode
  • Infinite scrolling
  • Virtual scrolling
  • Pdf export
  • Excel export
  • Print
  • Row template
  • Row spanning
  • Column spanning
  • Lazy load grouping
  • State persistence
  • Hierarchy Grid