Search results

Immutable Mode in Angular TreeGrid component

16 Sep 2021 / 3 minutes to read

The immutable mode optimizes the Tree Grid re-rendering performance by using the object reference and deep compare concept. When performing the Tree Grid 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 have to set the enableImmutableMode property as true.

  • This feature uses the primary key value for data comparison. So, you need to provide the isPrimaryKey column.
Source
Preview
app.component.ts
app.template.html
app.module.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from "@angular/core";
import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";
import { sampleData2, dataSource1, sampleData } from "./datasource";

@Component({
    selector: 'app-container',
    templateUrl: 'app/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(): void {
    this.immutableStart = new Date().getTime();
  }

  immutableDataBound(): void {
    let val: number | string = this.immutableInit ? '' : new Date().getTime() - this.immutableStart;
    document.getElementById("immutableDelete").innerHTML =
      "Immutable rendering Time: " + "<b>" + val + "</b>" + "<b>ms</b>";
    this.immutableStart = 0; this.immutableInit = false;
  }

  normalBeforeDataBound(): void {
    this.normalStart = new Date().getTime();
  }

  normalDataBound(): void {
    let val: number = this.init ? '' : new Date().getTime() - this.normalStart;
    document.getElementById("normalDelete").innerHTML =
      "Normal rendering Time: " + "<b>" + val + "</b>" + "<b>ms</b>";
    this.normalStart = 0; this.init = false;
  }

  addTopEvent(): void {
    this.normalGrid.addRecord(sampleData[0], 0, "Top");
    this.immutableGrid.addRecord(sampleData[0], 0, "Top");
  }

  addBottomEvent(): void {
    this.normalGrid.addRecord(sampleData[0], 0, "Bottom");
    this.immutableGrid.addRecord(sampleData[0], 0, "Bottom");
  }

  deleteEvent(): void {
    this.normalGrid.selectRows([0, 2, 4]);
    this.immutableGrid.selectRows([0, 2, 4]);
    this.normalGrid.deleteRecord();
    this.immutableGrid.deleteRecord();
  }

  sortEvent(): void {
    let aData: object[] = (this.immutableGrid.dataSource as object[]).reverse();
    this.normalGrid.setProperties({ dataSource: aData });
    this.immutableGrid.setProperties({ dataSource: aData });
  }

  pageEvent(): void {
    let page: number = this.normalGrid.pageSettings.currentPage + 1;
    this.normalGrid.goToPage(page);
    this.immutableGrid.goToPage(page);
  }
}
Copied to clipboard
<table>
    <tbody>
        <tr>
            <td>
                <span id='immutableDelete'></span>
            </td>
        </tr>
        <tr>
            <td>
                <span id='normalDelete'></span>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <button #addtop ejs-button class="e-control e-btn e-lib e-info" (click)="addTopEvent()">Add row
                        at top</button>
                    <button #addbottom ejs-button class="e-control e-btn e-lib e-info" (click)="addBottomEvent()">Add
                        row at bottom</button>
                    <button #delete ejs-button class="e-control e-btn e-lib e-info" (click)="deleteEvent()">Delete 5
                        rows</button>
                    <button #reverse ejs-button class="e-control e-btn e-lib e-info" (click)="sortEvent()">Sort Task
                        ID</button>
                    <button #paging ejs-button class="e-control e-btn e-lib e-info"
                        (click)="pageEvent()">Paging</button>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <span><b>Immutable Tree Grid</b></span>
                <ejs-treegrid #immutable [dataSource]='data' height='350' [selectionSettings]='selectionOptions' [editSettings]='editSettings' enableImmutableMode="true" allowPaging="true"
                    [pageSettings]="pageSettings" childMapping='subtasks' [treeColumnIndex]='1' (beforeDataBound)="immutableBeforeDataBound($event)"
                    (dataBound)="immutableDataBound($event)">
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' isPrimaryKey="true" width='120'
                            textAlign='Right'></e-column>
                        <e-column field='taskName' headerText='Task Name' width='160'></e-column>
                        <e-column field='startDate' headerText='Start Date' width='120' type= 'date' format= 'yMd' >
                        </e-column>
                        <e-column field='duration' headerText='Duration' width='120'></e-column>
                        <e-column field='progress' headerText='Progress' width='160'></e-column>
                    </e-columns>
                </ejs-treegrid>
            </td>
            <td>
                <span><b>Normal Tree Grid</b></span>
                <ejs-treegrid #normal [dataSource]='data' height='350' [selectionSettings]='selectionOptions' [editSettings]='editSettings' allowPaging="true" [pageSettings]="pageSettings"
                    (beforeDataBound)="normalBeforeDataBound($event)" childMapping='subtasks' [treeColumnIndex]='1'  (dataBound)="normalDataBound($event)">
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' isPrimaryKey="true" width='120'
                        textAlign='Right'></e-column>
                    <e-column field='taskName' headerText='Task Name' width='160'></e-column>
                    <e-column field='startDate' headerText='Start Date' width='120' type= 'date' format= 'yMd' >
                    </e-column>
                    <e-column field='duration' headerText='Duration' width='120'></e-column>
                    <e-column field='progress' headerText='Progress' width='160'></e-column>
                    </e-columns>
                </ejs-treegrid>
            </td>
        </tr>
    </tbody>
</table>
Copied to clipboard
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,EditService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Limitations

The following features are not supported in the immutable mode:

  • Frozen rows and columns
  • Row Template
  • Detail Template
  • Column reorder
  • Virtualization

You can refer to our Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our Angular Tree Grid example to knows how to present and manipulate data.