Row Template in Angular Treegrid component
12 Jan 202312 minutes to read
The rowTemplate
has an option to customise the look and behavior of the treegrid rows. The rowTemplate
property accepts either the template string or HTML element ID.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { textdata } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' >
<e-columns>
<e-column field = 'EmpID' headerText = 'Employee ID' width = '180'></e-column>
<e-column field = 'Name' headerText = 'Employee Name' width = '150'></e-column>
<e-column field = 'Address' headerText = 'Employee Details' width = '350'></e-column>
</e-columns>
<ng-template #rowTemplate let-data>
<tr>
<td class="border" style='padding-left:18px;'>
<div></div>
</td>
<td class="border" style='padding: 10px 0px 0px 20px;'>
<div style="font-size:14px;">
<p style="font-size:9px;"></p>
</div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img src=".png" alt="" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;"></div>
<div style="padding:5px;"></div>
<div style="padding:5px;font-size:12px;"></div>
</div>
</div>
</td>
</tr>
</ng-template>
</ejs-treegrid>`,
styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {
public data: Object[];
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit(): void {
this.data = textdata;
}
}
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);
The rowTemplate
property accepts only the TR element.
Row template with formatting
If the rowTemplate
is used, the value cannot be formatted inside the template using the columns.format
property. In that case, a function should be defined globally to format the value and invoke it inside the template.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { textdata } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { Internationalization } from '@syncfusion/ej2-base';
let instance: Internationalization = new Internationalization();
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' >
<e-columns>
<e-column field = 'EmpID' headerText = 'Employee ID' width = '180'></e-column>
<e-column field = 'Address' headerText = 'Employee Details' width = '350'></e-column>
<e-column field = 'DOB' headerText = 'DOB' width = '150'></e-column>
</e-columns>
<ng-template #rowTemplate let-data>
<tr>
<td class="border" style='padding-left:18px;'>
<div></div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img src=".png" alt="" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;"></div>
<div style="padding:5px;"></div>
<div style="padding:5px;font-size:12px;"></div>
</div>
</div>
</td>
<td class="border" style='padding-left: 20px;'>
<div></div>
</td>
</tr>
</ng-template>
</ejs-treegrid>`,
styleUrls: ['./app/app.style.css']
})
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);
Limitations
Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are not compatible with row template feature.
- Filtering
- Paging
- Sorting
- Scrolling
- Searching
- Rtl
- Context Menu
- State Persistence