Search results

Immutable Mode in Angular TreeGrid component

09 Jun 2021 / 2 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