Immutable mode in Angular TreeGrid component
4 Sep 20256 minutes to read
Immutable mode enhances TreeGrid re-rendering performance by using object reference comparison and deep comparison techniques. When TreeGrid actions are performed, only modified or newly added rows are re-rendered; unchanged rows remain unaffected.
Enable immutable mode by setting the enableImmutableMode
property to true.
- This feature uses the primary key value for data comparison. Set the
isPrimaryKey
column to ensure correct row identification.
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));
Limitations
The following features are not supported when immutable mode is enabled:
- Frozen rows and columns
- Row Template
- Detail Template
- Column reorder
- Virtualization
To discover more features, visit the Angular TreeGrid feature tour. Explore the Angular TreeGrid example to see data presentation and management in action.