Detail Template in Angular Treegrid component
9 Jan 20234 minutes to read
The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The detailTemplate
property accepts either the template string or HTML element ID.
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { TreeGridComponent, DetailRowService } from '@syncfusion/ej2-angular-treegrid';
import { textdata } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
let instance: Internationalization = new Internationalization();
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=317 width='auto' childMapping= 'Children' >
<e-columns>
<e-column field='Name' headerText='First Name' width='160'></e-column>
<e-column field='DOB' headerText = 'DOB' width='105' type='date' format='yMd'></e-column>
<e-column field='Designation' headerText = 'Designation' width='180'></e-column>
<e-column field='Country' headerText = 'Country' width='148'></e-column>
</e-columns>
<ng-template #detailTemplate let-data>
<div>
<div style="position: relative; display: inline-block; float: left; font-weight: bold; width: 10%;padding:5px 4px 2px 27px;;">
<img src=".png" alt=""/>
</div>
<div style="padding-left: 10px; display: inline-block; width: 66%; text-wrap: normal;font-size:13px;font-family:'Segoe UI';">
<div class="e-description" style="word-wrap: break-word;">
<b></b> was born on . Now lives at , . holds a position of <b></b> in our WA department, (Seattle USA).
</div>
<div class="e-description" style="word-wrap: break-word;margin-top:5px;">
<b style="margin-right:10px;">Contact:</b>
</div>
</div>
</div>
</ng-template>
</ejs-treegrid>`,
providers: [DetailRowService]
})
export class AppComponent implements OnInit {
public data: Object[];
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit(): void {
this.data = textdata;
}
public format(value: Date): string {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
}
}
export interface DateFormat extends Window {
format?: Function;
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);