Row template in Angular TreeGrid component
5 Sep 202523 minutes to read
The row template feature in TreeGrid allows customizing the appearance and layout of rows in the TreeGrid. This feature is useful when custom content, such as images, buttons, or other controls, needs to be displayed within the rows.
To enable the row template feature, set the rowTemplate property of the TreeGrid component. This property accepts a custom HTML template that defines the layout for each row.
In the following example, the first column displays Employee Information with Employee ID, the second column presents the Employee Photo, and the third column showcases employee details such as Name, Designation, etc.
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 headerText="Employee Image" width="150" textAlign="Center"></e-column>
<e-column headerText="Employee Details" width="300" textAlign="Center"></e-column>
</e-columns>
<ng-template #rowTemplate let-data>
<tr>
<td class="rows">
{{data.EmpID}}
</td>
<td class="rowphoto">
<img src="{{data.FullName}}.png" alt="{{data.FullName}}" />
</td>
<td class="details">
<table class="CardTable">
<colgroup>
<col width="30%">
<col width="10%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name</td>
<span>:</span>
<td class="CardData"> {{data.FirstName}}</td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<span>:</span>
<td>{{data.LastName}}</td>
</tr>
<tr>
<td class="CardHeader">Title</td>
<span>:</span>
<td>{{data.Designation}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</ng-template>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
ngOnInit(): void {
this.data = textdata;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Row template with formatting
The row template feature in Syncfusion® TreeGrid allows customizing the layout of rows in the TreeGrid. This is useful when images, buttons, or other custom content need to be displayed within the rows of a TreeGrid.
By default, Syncfusion® TreeGrid provides the columns.format property to format the values displayed in each column. However, when using the rowTemplate, the columns.format property cannot be directly applied to format the values inside the template.
To format the values within the row template, a global function can be defined that handles the formatting logic. This function can be invoked inside the template to format the corresponding values.
Here is an example of how to define a global formatting function for a date column and use it inside a rowTemplate:
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';
const 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 headerText="Employee Image" width="150" textAlign="Center"></e-column>
<e-column headerText="Employee Details" width="300" textAlign="Center"></e-column>
</e-columns>
<ng-template #rowTemplate let-data>
<tr>
<td class="rows">
{{data.EmpID}}
</td>
<td class="rowphoto">
<img src="{{data.FullName}}.png" alt="{{data.FullName}}" />
</td>
<td class="details">
<table class="CardTable">
<colgroup>
<col width="30%">
<col width="10%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name</td>
<span>:</span>
<td class="CardData"> {{data.FirstName}}</td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<span>:</span>
<td>{{data.LastName}}</td>
</tr>
<tr>
<td class="CardHeader"> Birth Date </td>
<span>:</span>
<td>{{format(data.DOB)}}</td>
</tr>
<tr>
<td class="CardHeader">Title</td>
<span>:</span>
<td>{{data.Designation}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</ng-template>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
public format(value: Date): string {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
}
ngOnInit(): void {
this.data = textdata;
}
}
export interface DateFormat extends Window {
format?: (value: Date) => string;
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));When using the
rowTemplatefeature in Syncfusion® TreeGrid, any formatting applied to columns using thecolumns.formatproperty will not work inside the template.
Render Syncfusion® control in row template
The TreeGrid allows rendering custom Syncfusion® controls within the rows of the TreeGrid. This feature is helpful as it enables displaying interactive Syncfusion® controls instead of field values in the TreeGrid.
To enable a Syncfusion® control in a row template, set the rowTemplate property of the TreeGrid component. This property accepts a custom HTML template that defines the layout for each row.
Here is an example that demonstrates rendering Syncfusion® controls within a row template:
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { RowDataBoundEventArgs } from '@syncfusion/ej2-grids';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='315' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=100></e-column>
<e-column field='startDate' headerText='Start Date' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' width=80></e-column>
<e-column field='priority' headerText='Priority' width=80></e-column>
</e-columns>
<ng-template #rowTemplate let-data>
<tr>
<td class="rows">
<ejs-chiplist width="90" id="chip" [text]="data.taskID">
</ejs-chiplist>
</td>
<td class="rows">
{{data.taskName}}
</td>
<td class="rows">
<ejs-datepicker width="90" [value]="data.startDate">
</ejs-datepicker>
</td>
<td class="rows">
<ejs-numerictextbox width="80" [(value)]="data.duration">
</ejs-numerictextbox>
</td>
<td class="rows">
<ejs-dropdownlist width="80" [(value)]="data.priority"
[dataSource]="priorityData" [popupHeight]="150" [popupWidth]="150">
</ejs-dropdownlist>
</td>
</tr>
</ng-template>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
public priorityData?: string[];
ngOnInit(): void {
this.data = sampleData;
this.priorityData = ['High', 'Low', 'Critical', 'Normal'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Limitations
Row template feature is not compatible with all the features which are available in the TreeGrid, and it has limited features support. The features that are incompatible with the row template feature are listed below.
- Filtering
- Paging
- Sorting
- Searching
- RTL
- Export
- Context menu
- State persistence
- Selection
- Editing
- Frozen rows & columns
- Virtual & infinite scrolling
- Column chooser
- Column menu
- Detail row
- Resizing
- Reordering
- Aggregates
- Clipboard
- Adaptive view