Enable or disable TreeGrid and its actions in Angular TreeGrid component

27 Aug 20256 minutes to read

The TreeGrid and its actions can be enabled or disabled by applying or removing the appropriate CSS styles.

To enable or disable the TreeGrid and its actions, follow these steps:

Step 1:

Create a CSS class with custom styles to override the default appearance and functionality of the TreeGrid.

    .disabletreegrid {
        pointer-events: none;
        opacity: 0.4;
    }
    .wrapper {
        cursor: not-allowed;
    }

Step 2:

Add or remove the CSS class from the TreeGrid in the click event handler of a button.

public click(): void {
    if (this.treegridObj && this.treegridObj.element.classList.contains('disabletreegrid')) {
      this.treegridObj.element.classList.remove('disabletreegrid');
      (document.getElementById("TreeGridParent") as HTMLElement).classList.remove('wrapper');
    }
    else if (this.treegridObj) {
      this.treegridObj.element.classList.add('disabletreegrid');
      (document.getElementById("TreeGridParent") as HTMLElement).classList.add('wrapper');
    }
}

In the demo below, clicking the button enables or disables the TreeGrid and its actions.

app.component.ts

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, ViewChild, ViewEncapsulation } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent,EditSettingsModel, ToolbarItems, ToolbarService, EditService } from '@syncfusion/ej2-angular-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    styleUrls: ['./app.disable.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, EditService],
    template: `<button ejs-button (click)="click()"  cssClass="e-flat e-primary" iconCss="e-icons e-play-icon" [isToggle]="true">Enable/Disable Grid</button>
    <div id="TreeGridParent">
    <ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='210' [editSettings]='editSettings' [toolbar]='toolbar'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100'></e-column>
            <e-column field='StartDate' headerText='Start Date' textAlign='Right' [format]='formatOptions' editType='datepickeredit' [edit]='editOptions' width='90'></e-column>
            <e-column field='EndDate' headerText='End Date' width='90' [format]='formatOptions' editType='datepickeredit' [edit]='editOptions' textAlign='Right'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>
    </div>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public editOptions?: Object;
    public formatOptions?: Object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    @ViewChild('treegridObj')
    public treegridObj?: TreeGridComponent;

    ngOnInit(): void {
        this.data = projectData;
        this.editOptions = { params: { format: 'y/M/d' } };
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.editSettings = { allowAdding: true, allowEditing: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    click() {
      if (this.treegridObj && this.treegridObj.element.classList.contains('disabletreegrid')) {
      this.treegridObj.element.classList.remove('disabletreegrid');
      (document.getElementById("TreeGridParent") as HTMLElement).classList.remove('wrapper');
      }
      else if (this.treegridObj) {
        this.treegridObj.element.classList.add('disabletreegrid');(document.getElementById("TreeGridParent") as HTMLElement).classList.add('wrapper');
    }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For detailed feature information, refer to the Angular TreeGrid feature tour page. More examples on presenting and manipulating data are available in the Angular TreeGrid example.