Customize the edit dialog in Angular TreeGrid component

27 Aug 20255 minutes to read

The appearance of the edit dialog in the TreeGrid component can be customized using the actionComplete event. The customization is typically performed based on the requestType property, which is set to beginEdit or add depending on whether an existing record is being edited or a new record is being added.

In the example below, the dialog’s header text is customized for both editing and adding records.

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 { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent, EditSettingsModel, ToolbarItems , EditService, ToolbarService  } from '@syncfusion/ej2-angular-treegrid';
import { DialogEditEventArgs } from '@syncfusion/ej2-angular-grids';
import { Dialog } from '@syncfusion/ej2-popups';

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

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    providers: [EditService, ToolbarService],
    template: `<ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='265' [editSettings]='editSettings' [toolbar]='toolbar' (actionComplete)="actionComplete($event)" >
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' isPrimaryKey='true'  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>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public editOptions?: Object;
    public formatOptions?: Object;

    ngOnInit(): void {
        this.data = projectData;
        this.editOptions = { params: { format: 'y/M/d' } };
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    actionComplete(args: DialogEditEventArgs) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            const dialog = args.dialog as Dialog;
            const TaskName = 'TaskName';
            dialog.height = 400;
            // change the header of the dialog
            dialog.header = args.requestType === 'beginEdit' ? 'Record of ' + (args as any).rowData[TaskName] : 'New Customer';
        }
    }



}

main.ts

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

For an overview of the Angular TreeGrid component and its features, see the Angular TreeGrid feature tour page. More examples of data presentation and manipulation are available in the Angular TreeGrid example.