Column template in Angular TreeGrid component
25 Aug 202524 minutes to read
The TreeGrid component provides a template option that allows displaying custom elements in a column instead of the field value. This can be useful when displaying images, buttons, or other custom content within a column.
When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for TreeGrid actions like sorting, filtering, editing unless the
fieldproperty of the column is specified.
Render image in a column
To render an image in a TreeGrid column, define a template for the column using the template property. The template property expects the HTML element or a function that returns the HTML element.
The following example demonstrates how to define a template for the Employee Name field that displays an image element. The template property is set to the HTML element that contains an image tag.
import { Component, OnInit } from '@angular/core';
import { textdata } from './datasource';
@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 Name' width = '150'>
<ng-template #template let-data>
<div style="position:relative;display:inline-block;">
<img src="{{data.FullName}}.png" alt="{{data.FullName}}" />
</div>
</ng-template>
</e-column>
<e-column field = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column field = 'Address' headerText = 'Employee Details' width = '350'></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
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));The template option allows defining any HTML content within a column.
Render hyperlink in a column
The TreeGrid component provides support for rendering hyperlink columns and performing routing on click using the template property. This feature is useful when displaying data that requires a link to another page or website.
The following example demonstrates how to render hyperlink column in the TreeGrid using the template property of the e-column tag. To define a template for the column, the ng-template with the a tag can be used to create the hyperlink. The onClick function is triggered when the hyperlink is clicked.
import { Component, OnInit } from '@angular/core';
import { textdata } from './datasource';
@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 Name' width = '150'>
<ng-template #template let-data>
<div>
<a href="#" (click)="onClick($event, data.FirstName)">
{{data.FirstName}}
</a>
</div>
</ng-template>
</e-column>
<e-column field = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column field = 'Address' headerText = 'Employee Details' width = '350'></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = textdata;
}
onClick(event:MouseEvent, firstName: string) {
var url = 'https://www.meaningofthename.com/';
var searchUrl = url + firstName;
window.open(searchUrl);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The window.open() method is a built-in JavaScript function that opens a new browser window or tab with the specified URL.
Render other components in a column
The column template provides options to render a custom component in a TreeGrid column instead of a field value.
Render ColorPicker component in a column
The ColorPicker component of Syncfusion® provides a user-friendly way to select colors from a pre-defined color palette or custom colors. It can be used in various scenarios such as picking a theme color or changing the color of an element on a page.
In the following code, the ColorPicker component is rendered in the TreeGrid column by defining the template property.
<div>
<input ejs-colorpicker #colorPicker id="color-picker" type="color" [mode]="modeSettings" (change)="change($event)"/>
</div>
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PageService, SortService, FilterService, ToolbarService, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { Component, OnInit } from '@angular/core';
import { textdata } from './datasource';
import { ColorPickerEventArgs } from '@syncfusion/ej2-angular-inputs';
import { TreeGridComponent, } from '@syncfusion/ej2-angular-treegrid'
@Component({
imports: [TreeGridModule, ColorPickerModule],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' [enableHover]="false">
<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 = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column headerText='Employee Performance Rating' width='280'>
<ng-template #template let-data>
<div class="colorpicker">
<input ejs-colorpicker #colorPicker id="color-picker" type="color" [mode]="modeSettings" (change)="change($event)"/>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
@ViewChild('treegrid')
treegrid?: TreeGridComponent;
public modeSettings = 'Palette'
ngOnInit(): void {
this.data = textdata;
}
change(args: ColorPickerEventArgs) {
const selectedRows = (this.treegrid as TreeGridComponent).getSelectedRows() as HTMLElement[];
for (const row of selectedRows) {
row.style.backgroundColor = args.value as string;
}
(this.treegrid as TreeGridComponent).clearSelection();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Render DropDownList component in a column
To render a custom component in a TreeGrid column, define a template for the column using the template property. In the following code, the DropDownList component is rendered in the Country column by defining the template property.
<div>
<ejs-dropdownlist [value]='data.Country' width="100" [dataSource]='dropData' [popupHeight]='150' [popupWidth]='150' ></ejs-dropdownlist>
</div>
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PageService, SortService, FilterService, ToolbarService, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit } from '@angular/core';
import { textdata } from './datasource';
@Component({
imports: [TreeGridModule, DropDownListAllModule],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' [enableHover]="false">
<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 = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column headerText = 'Country' width = '150'>
<ng-template #template let-data>
<div>
<ejs-dropdownlist [value]='data.Country' width="100" [dataSource]='dropData' [popupHeight]='150' [popupWidth]='150' >
</ejs-dropdownlist>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public dropData?: string[];
ngOnInit(): void {
this.data = textdata;
this.dropData = ['USA', 'UK', 'London'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Render Chip component in a column
The TreeGrid component provides support for rendering Chips component in a column using the template property. This feature is useful when displaying data that requires a chip component to be rendered in a column.
In the following code, the Chips component is rendered in the TreeGrid First Name column by defining the template property.
<div>
<ejs-chiplist id="chip" [text]="data.Name"></ejs-chiplist>
</div>
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PageService, SortService, FilterService, ToolbarService, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, } from '@angular/core';
import { textdata } from './datasource';
@Component({
imports: [TreeGridModule, ButtonModule, ChipListModule],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' [enableHover]="false">
<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 = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column headerText='FirstName' width=150>
<ng-template #template let-data>
<div class="chip">
<ejs-chiplist id="chip" [text]="data.Name"></ejs-chiplist>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
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));Render LineChart component in a column
The LineChart component of Syncfusion® provides an elegant way to represent and compare data over time. It displays data points connected by straight line segments to visualize trends in data.
In the following example, the Sparkline Chart component is rendered in the TreeGrid column by defining the template property.
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PageService, SortService, FilterService, ToolbarService, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { SparklineAllModule, } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit, } from '@angular/core';
import { textdata } from './datasource';
import { Sparkline } from '@syncfusion/ej2-angular-charts';
import { TreeGridComponent, } from '@syncfusion/ej2-angular-treegrid'
@Component({
imports: [TreeGridModule, SparklineAllModule,],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' (created)="renderGridSparkline()" >
<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 = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column headerText='Employee Performance Rating' width='280'>
<ng-template #template let-data>
<div id="spkline"></div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[] = textdata;
@ViewChild('treegrid')
treegrid?: TreeGridComponent;
public lineData: object[] = [
[0, 6, -4, 1, -3, 2, 5],
[5, -4, 6, 3, -1, 2, 0],
[6, 4, 0, 3, -2, 5, 1],
[4, -6, 3, 0, 1, -2, 5],
[3, 5, -6, -4, 0, 1, 2],
[1, -3, 4, -2, 5, 0, 6],
[2, 4, 0, -3, 5, -6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, -6, 4, 1, -3, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
];
public getSparkData(type: string, count: number) {
return this.lineData[count] as number[];
}
ngOnInit(): void {
}
public renderGridSparkline(): void {
setTimeout(() => {
const length = (this.treegrid as TreeGridComponent).getDataRows().length
for (let i: number = 1; i <= length; i++) {
let line: Sparkline = new Sparkline({
height: '50px',
width: '90%',
lineWidth: 2,
valueType: 'Numeric',
fill: '#3C78EF',
dataSource: this.getSparkData('line', i)
});
line.appendTo('#spkline' + i);
}
}, 100)
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Using condition template
The conditional column template allows displaying template elements based on specific conditions.
The following example demonstrates how to use the template property with the ng-template element and add *ngIf directive to render the checkbox based on the value of the approved field. The approved field will render a checkbox in each row for which the value of the approved field is true.
<e-column headerText='Approved' width='150' textAlign='Center'>
<ng-template #template let-data>
<div *ngIf="data.approved; else elseblock">
<input type="checkbox" checked>
</div>
</ng-template>
<ng-template #elseblock><input type="checkbox"></ng-template>
</e-column>
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { PageService, SortService, FilterService, ToolbarService, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
imports: [TreeGridModule,CommonModule, ButtonModule,],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' height='250' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column headerText='Approved' width='150' textAlign='Center'>
<ng-template #template let-data>
<div *ngIf="data.approved; else elseblock">
<input type="checkbox" checked>
</div>
</ng-template>
<ng-template #elseblock><input type="checkbox"></ng-template>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Any template element or custom component can be used instead of the checkbox in the conditional template based on requirements.
How to get the row object by clicking on the template element
The TreeGrid component allows retrieving the row object of the selected record when clicking on a template element. This feature can be useful when performing custom actions based on the selected record.
In the following code, the button element is rendered in the Employee Data column and click event binding is used to call the showDetails method when the template element is clicked. The showDetails method is passed with the data object as an argument from the template variable, which allows access to the selected row object and display it in the dialog popup.
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PageService, SortService, FilterService, ToolbarService, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, OnInit, } from '@angular/core';
import { textdata } from './datasource';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule, ButtonModule, DropDownListAllModule, DialogModule],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=291 width='auto' childMapping= 'Children' [enableHover]="false">
<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 = 'Designation' headerText = 'Designation' width = '150'></e-column>
<e-column headerText='Employee Data' width='150' textAlign='Right' isPrimaryKey='true'>
<ng-template #template let-data>
<button class="empData" (click)="showDetails(data)">View</button>
<div [hidden]="!selectedRecord || selectedRecord !== data">
<ejs-dialog #Dialog [visible]="false" width="50%" showCloseIcon="true" [header]="header">
<p><b>EmployeeID:</b> </p>
<p><b>FirstName:</b> </p>
<p><b>Designation:</b> </p>
</ejs-dialog>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public header?: string;
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
@ViewChild('Dialog')
public dialog?: DialogComponent;
public selectedRecord: any;
ngOnInit(): void {
this.data = textdata;
this.header = 'Selected Row Details';
}
showDetails(data: any) {
(this.dialog as DialogComponent).visible = true;
this.selectedRecord = data;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Use custom helper inside the template
The Syncfusion® TreeGrid allows using custom helpers inside the ng-template directive of a column. This feature allows creating complex templates that can incorporate additional helper functions that are not available through the default template syntax.
To use the custom helper function inside a column template, first add the function to the template’s context. This can be done by using the let keyword to create a new variable that references the function.
The following example demonstrates how to use a custom helper function inside the template property, using the ng-template element for the Freight column.
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' height='315' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80>
<ng-template #template let-data>
{{ formatCurrency(data.duration) }}
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public formatCurrency(value: number): string {
return '₹ ' + value.toFixed(3);
}
ngOnInit(): void {
this.data = sampleData;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Custom helpers can only be used inside the ng-template directive of a column.