Command column editing in Angular TreeGrid component

8 Sep 202510 minutes to read

Command column editing allows you to include CRUD (Create, Read, Update, Delete) action buttons in a dedicated column, enabling row-level operations such as inline editing, deleting, saving, and canceling directly in the TreeGrid.

To enable command column editing, define the column.commands property for your columns. This property lets you specify which command buttons (Edit, Delete, Save, Cancel) should be shown in the command column.

To use CRUD operations with command columns, inject the CommandColumnService into the @NgModule.providers. This service activates the required functionalities for command column actions.

The built-in command buttons and their actions are:

Command Button Actions
Edit Edit the current row.
Delete Delete the current row.
Save Update the edited row.
Cancel Cancel the edited state.

Example: Adding CRUD action buttons using the commands column property:

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService,EditService,ToolbarService,CommandColumnService  } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { CommandModel } from "@syncfusion/ej2-angular-grids" ;
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule],

    providers: [PageService, EditService, ToolbarService, CommandColumnService ],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data'  [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='270' [editSettings]='editSettings' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                        <e-column headerText='Commands' width=120 [commands]='commands'></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public editSettings?: EditSettingsModel;
    public toolbarOptions?: ToolbarItems[];
    public commands?: CommandModel;
    ngOnInit(): void {
        this.data = sampleData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.commands = [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
                { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },
                { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
                { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }] as CommandModel;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom command

Custom command columns allow you to add your own command buttons for specialized actions on each row. This is useful for providing unique operations such as showing details or triggering custom dialogs.

To add custom command buttons, use the column.commands property and define custom buttons with specific logic.

Example: Adding custom command buttons with behavior to display row details in a dialog using the click event:

import { NgModule,ViewChild } from '@angular/core'
import { CommonModule } from '@angular/common'
import { TreeGridComponent, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService,EditService,ToolbarService,CommandColumnService  } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { closest } from '@syncfusion/ej2-base';
import { sampleData } from './datasource';
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { CommandClickEventArgs, CommandModel } from "@syncfusion/ej2-angular-grids" ;
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule, DialogModule, CommonModule],

    providers: [PageService, EditService, ToolbarService, CommandColumnService ],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data'  [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='270' [editSettings]='editSettings' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                        <e-column headerText='Commands' width=120 [commands]='commands'></e-column>
                    </e-columns>
                </ejs-treegrid>
                <ejs-dialog #dialog header="Row Information" [content]="dialogContent" showCloseIcon="true" width="400px" [visible]="dialogVisible" (close)="dialogClose()"> 
                    <ng-template #dialogContent>
                        <ng-container *ngIf="rowData">
                            <p><b>Task Name:</b> </p>
                            <p><b>Task ID:</b> </p>
                            <p><b>Duration:</b> </p>
                        </ng-container>
                    </ng-template>
                </ejs-dialog> `
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public editSettings?: EditSettingsModel;
    public toolbarOptions?: ToolbarItems[];
    public commands?: any;
    @ViewChild('treegrid')
    public treegrid?:TreeGridComponent;

    public rowData: any;
    public dialogVisible: boolean = false;

    ngOnInit(): void {
        this.data = sampleData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.commands = [{ buttonOption: { content: 'Details', cssClass: 'e-flat', click: this.onClick.bind(this) } }];
    }
    public onClick(args:any): void {
        let rowIndex: number = (<HTMLTableRowElement>closest(args.target as Element, '.e-row')).rowIndex;
        this.rowData = (this.treegrid as TreeGridComponent).getCurrentViewRecords()[rowIndex];
    
        if (this.rowData) {
            this.dialogVisible = true;
        }
    }
    public dialogClose(): void {
        this.dialogVisible = false;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));