Local data in Angular TreeGrid component
25 Sep 202524 minutes to read
In local data binding, the data source for rendering the TreeGrid control is retrieved from within the same application.
There are two types of data binding supported in the TreeGrid component:
- Hierarchical data source binding
- Self-referential data binding (flat data)
To bind local data to the TreeGrid, assign a JavaScript object array to the dataSource property. You may also provide a DataManager instance as the data source.
By default,
DataManagerusesJsonAdaptorfor local data binding.
Hierarchical data source binding
Use the childMapping property to map child records in hierarchical data sources.
The following code example shows how to bind hierarchical local data to the TreeGrid:
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import {PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
TreeGridModule,
ButtonModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks'
[allowPaging]="true" [pageSettings]='pageSettings'>
<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></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
this.data = sampleData;
this.pageSettings = { pageSize: 6 };
}
}/**
* TreeGrid DataSource
*/
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- Remote data binding is not supported for hierarchical data sources.
Self-referential data binding (flat data)
The TreeGrid can render data from self-referential (flat) data structures by specifying two fields: an ID field and a parent ID field.
-
ID Field: Contains unique values that identify each node. Assign this field to the
idMappingproperty. -
Parent ID Field: Contains values representing parent nodes. Assign this field to the
parentIdMappingproperty.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { projectData } from './datasource';
@Component({
imports: [
TreeGridModule,
ButtonModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' parentIdMapping='parentID' idMapping='TaskID' height=265 [allowPaging]="true">
<e-columns>
<e-column field='TaskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='TaskName' headerText='Task Name' width='170'></e-column>
<e-column field='StartDate' headerText='Start Date' width='130' format="yMd" textAlign='Right'></e-column>
<e-column field='Duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = projectData;
}
}/**
* TreeGrid DataSource
*/
export let projectData: Object[] = [
{ TaskID: 1, TaskName: 'Parent Task 1', StartDate: new Date('02/23/2017'), Duration: 3, Priority : 'Normal',
EndDate: new Date('02/27/2017'), Progress: '40' },
{ TaskID: 2, TaskName: 'Child Task 1', StartDate: new Date('02/23/2017'), Duration: 4, Priority : 'Low',
EndDate: new Date('02/27/2017'), Progress: '40', parentID: 1 },
{ TaskID: 3, TaskName: 'Child Task 2', StartDate: new Date('02/23/2017'), Duration: 2, Priority : 'Normal',
EndDate: new Date('02/27/2017'), Progress: '40', parentID: 1 },
{ TaskID: 4, TaskName: 'Child Task 3', StartDate: new Date('02/23/2017'), Duration: 2, Priority : 'Low',
EndDate: new Date('02/27/2017'), Progress: '40', parentID: 1 },
{ TaskID: 5, TaskName: 'Parent Task 2', StartDate: new Date('03/14/2017'), Duration: 6, Priority : 'Normal',
EndDate: new Date('03/18/2017'), Progress: '40' },
{ TaskID: 6, TaskName: 'Child Task 1', StartDate: new Date('03/02/2017'), Duration: 11, Priority : 'High',
EndDate: new Date('03/06/2017'), Progress: '40', parentID: 5 },
{ TaskID: 7, TaskName: 'Child Task 2', StartDate: new Date('03/02/2017'), Duration: 7, Priority : 'Critical',
EndDate: new Date('03/06/2017'), Progress: '40', parentID: 5 },
{ TaskID: 8, TaskName: 'Child Task 3', StartDate: new Date('03/02/2017'), Duration: 10, Priority : 'Breaker',
EndDate: new Date('03/06/2017'), Progress: '40', parentID: 5 },
{ TaskID: 9, TaskName: 'Child Task 4', StartDate: new Date('03/02/2017'), Duration: 15, Priority : 'High',
EndDate: new Date('03/06/2017'), Progress: '40', parentID: 5 },
{ TaskID: 10, TaskName: 'Parent Task 3', StartDate: new Date('03/09/2017'), Duration: 17, Priority : 'Breaker',
EndDate: new Date('03/13/2017'), Progress: '40' },
{ TaskID: 11, TaskName: 'Child Task 1', StartDate: new Date('03/9/2017'), Duration: 0, Priority : 'Low',
EndDate: new Date('03/13/2017'), Progress: '40', parentID: 10 },
{ TaskID: 12, TaskName: 'Child Task 2', StartDate: new Date('03/9/2017'), Duration: 10, Priority : 'Breaker',
EndDate: new Date('03/13/2017'), Progress: '40', parentID: 10 },
{ TaskID: 13, TaskName: 'Child Task 3', StartDate: new Date('03/9/2017'), Duration: 11, Priority : 'Normal',
EndDate: new Date('03/13/2017'), Progress: '40', parentID: 10 },
{ TaskID: 14, TaskName: 'Child Task 4', StartDate: new Date('03/9/2017'), Duration: 1, Priority : 'Normal',
EndDate: new Date('03/13/2017'), Progress: '40', parentID: 10 },
{ TaskID: 15, TaskName: 'Child Task 5', StartDate: new Date('03/9/2017'), Duration: 14, Priority : 'Critical',
EndDate: new Date('03/13/2017'), Progress: '40', parentID: 10 }
];import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Below is a list of reserved properties used internally by TreeGrid. To avoid conflicts, do not use these property names in your data models.
| Reserved keywords | Purpose |
|---|---|
| childRecords | Specifies the child records of a parent data row |
| hasChildRecords | Indicates whether the record contains child records |
| hasFilteredChildRecords | Indicates whether the record contains filtered child records |
| expanded | Indicates whether the child records are expanded |
| parentItem | Specifies the parent item for child records |
| index | Represents the index of the current record |
| level | Indicates the hierarchy level of the record |
| filterLevel | Indicates the hierarchy level of a filtered record |
| parentIdMapping | Specifies the parent ID |
| uniqueID | Specifies the unique ID of a record |
| parentUniqueID | Specifies the parent unique ID of a record |
| checkboxState | Indicates the checkbox state of a record |
| isSummaryRow | Specifies if the record is a summary row |
| taskData | Specifies the main data of a task record |
| primaryParent | Specifies the primary parent data |
Refresh the data source
To add or delete data source records externally and reflect these changes in the TreeGrid, invoke the refresh method after updating the data source.
Step 1:
Add or delete records in the data source as follows:
this.treegrid.dataSource.unshift(data); // Add a new record.
this.treegrid.dataSource.splice(selectedRow, 1); // Delete a record.Step 2:
After modifying the data source, refresh the TreeGrid:
this.treegrid.refresh(); // Refresh the TreeGrid.import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { sampleData } from './datasource';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<button ej-button class="e-flat" (click)="add()">Add</button>
<button ej-button class="e-flat" (click)="delete()">Delete</button>
<ejs-treegrid #treegrid [dataSource]="data" childMapping="subtasks" height="350" [treeColumnIndex]="1" [allowPaging]="true" [pageSettings]="pageSettings">
<e-columns>
<e-column field="taskID" headerText="Task ID" width="90" textAlign="Right"></e-column>
<e-column field="taskName" headerText="Task Name" width="200"></e-column>
<e-column field="startDate" headerText="Start Date" width="110" format="yMd" textAlign="Right"></e-column>
<e-column field="endDate" headerText="End Date" width="110" format="yMd" textAlign="Right"></e-column>
<e-column field="duration" headerText="Duration" width="100" textAlign="Right"></e-column>
<e-column field="progress" headerText="Progress" width="80" textAlign="Right"></e-column>
<e-column field="priority" headerText="Priority" width="90"></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[] = [];
@ViewChild('treegrid') public treegrid?: TreeGridComponent;
pageSettings: any;
ngOnInit(): void {
this.data = sampleData;
}
add(): void {
const rdata: object = {
taskID: 102,
taskName: 'New record',
startDate: new Date(8367642e5),
endDate: new Date(8467642e5),
duration: 15,
progress: 100,
priority: 'Normal',
};
(this.treegrid?.dataSource as object[]).unshift(rdata);
this.treegrid?.refresh();
}
delete(): void {
const selectedRow: number = this.treegrid?.getSelectedRowIndexes()[0] as number;
if (this.treegrid?.getSelectedRowIndexes().length) {
(this.treegrid?.dataSource as object[]).splice(selectedRow, 1);
} else {
alert('No records selected for delete operation');
}
this.treegrid?.refresh();
}
}/**
* TreeGrid DataSource
*/
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Immutable mode
Immutable mode in the Syncfusion TreeGrid is designed to optimize re-rendering performance by utilizing the object reference and deep comparison concept. When performing the TreeGrid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows.
To enable this feature, you need to set the enableImmutableMode property as true.
The following example demonstrates how to enable immutable mode:
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService,EditService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from "@angular/core";
import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { sampleData2, dataSource1, sampleData } from "./datasource";
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule
],
providers: [PageService,EditService],
standalone: true,
selector: 'app-container',
templateUrl: './app.template.html'
})
export class AppComponent implements OnInit {
public data: Object[] = [];
public pageSettings: Object = { pageSize: 50 };
public editSettings: Object = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' };
public selectionOptions: Object = { type: 'Multiple' };
public immutableStart?: number;
public normalStart?: number;
@ViewChild("immutable")
public immutableGrid?: GridComponent;
@ViewChild("normal")
public normalGrid?: GridComponent;
@ViewChild("addtop")
public addtop?: ButtonComponent;
@ViewChild("addbottom")
public addbottom?: ButtonComponent;
@ViewChild("delete")
public delete?: ButtonComponent;
@ViewChild("reverse")
public reverse?: ButtonComponent;
@ViewChild("paging")
public paging?: ButtonComponent;
public immutableInit: boolean = true;
public init: boolean = true;
ngOnInit(): void {
dataSource1();
this.data = sampleData2;
}
immutableBeforeDataBound(args: any): void {
this.immutableStart = new Date().getTime();
}
immutableDataBound(args: any): void {
let val: number | string = this.immutableInit ? '' : new Date().getTime() - (this.immutableStart as number);
(document.getElementById("immutableDelete") as HTMLElement).innerHTML =
"Immutable rendering Time: " + "<b>" + val + "</b>" + "<b>ms</b>";
this.immutableStart = 0; this.immutableInit = false;
}
normalBeforeDataBound(args: any): void {
this.normalStart = new Date().getTime();
}
normalDataBound(args: any): void {
let val: number = (this.init ? '' : new Date().getTime() as number - (this.normalStart as number)) as number;
(document.getElementById("normalDelete") as HTMLElement).innerHTML =
"Normal rendering Time: " + "<b>" + val + "</b>" + "<b>ms</b>";
this.normalStart = 0; this.init = false;
}
addTopEvent(): void {
(this.normalGrid as GridComponent).addRecord(sampleData[0], 0);
(this.immutableGrid as GridComponent).addRecord(sampleData[0], 0);
}
addBottomEvent(): void {
(this.normalGrid as GridComponent).addRecord(sampleData[0], 0,);
(this.immutableGrid as GridComponent).addRecord(sampleData[0], 0);
}
deleteEvent(): void {
(this.normalGrid as GridComponent).selectRows([0, 2, 4]);
(this.immutableGrid as GridComponent).selectRows([0, 2, 4]);
(this.normalGrid as GridComponent).deleteRecord();
(this.immutableGrid as GridComponent).deleteRecord();
}
sortEvent(): void {
let aData: object[] = ((this.immutableGrid as GridComponent).dataSource as object[]).reverse();
(this.normalGrid as GridComponent).setProperties({ dataSource: aData });
(this.immutableGrid as GridComponent).setProperties({ dataSource: aData });
}
pageEvent(): void {
let page: number = ((this.normalGrid as GridComponent).pageSettings.currentPage as number + 1) as number;
(this.normalGrid as GridComponent).goToPage(page);
(this.immutableGrid as GridComponent).goToPage(page);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- This feature uses the primary key value for data comparison. Set the isPrimaryKey column to ensure correct row identification.
Limitations
The following features are not supported when immutable mode is enabled:
- Frozen rows and columns
- Row Template
- Detail Template
- Column reorder
- Virtualization
Access the content of the TreeGrid using the
getContentmethod.
Access the table content by using thegetContentTablemethod.
Destroy the component programmatically using thedestroymethod.