Column template in Angular TreeGrid component
19 Sep 202424 minutes to read
TreeGrid component provides a template option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display 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 tree grid actions like sorting, filtering, editing unless
fieldproperty of the column is specified.
Render image in a column
To render an image in a tree grid column, you need to 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 to define 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 tree grid using the template property of the e-column tag. To define a template for the column, you can use the ng-template with the a tag 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 has options to render a custom component in a tree grid 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 a variety of scenarios such as picking a theme color or changing the color of an element on a page.
In the following code, we rendered the ColorPicker component in the tree grid 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 tree grid column, you need to define a template for the column using the template property. In the following code, we rendered the DropDownList component 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, we rendered the Chips component in the Tree Grid 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, we rendered the Sparkline Chart component in the tree grid 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 you to display 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));You can use any template element or custom component instead of the checkbox in the conditional template based on your requirement.
How to get the row object by clicking on the template element
The TreeGrid component allows you to retrieve the row object of the selected record when clicking on a template element. This feature can be useful when you need to perform 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 you to access 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 Tree Grid allows you to use custom helpers inside the ng-template directive of a column. This feature allows you to create 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, you must 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.