Enable editing in single click in Angular Grid component

Normal Editing

You can enable editing of a row with a single mouse click in the Syncfusion Angular Grid using the Normal editing mode. Invoke the startEdit and endEdit methods within an event handler for the Grid’s mouseup event. Depending on the clicked target, start or end the row editing mode immediately, facilitating quick data entry and updates.

app.component.ts

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { EditService, EditSettingsModel, GridComponent, GridModule, PageService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule],
    providers: [EditService, PageService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `
        <ejs-grid #grid [dataSource]='data' height='220px' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging='true' (load)='load()'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100 isPrimaryKey='true'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
            </e-columns>
        </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    public toolbar?: ToolbarItems[];
    @ViewChild('grid')
    public grid?: GridComponent;
    public editSettings?: EditSettingsModel;
    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    load(){
        (this.grid as GridComponent).element.addEventListener('mouseup', (e) => {
            if ((e.target as HTMLElement).classList.contains("e-rowcell")) {
                if ((this.grid as GridComponent).isEdit){
                    (this.grid as GridComponent).endEdit();
                }
                let index: number = parseInt(((e.target as HTMLElement).getAttribute("data-index") as string));
                (this.grid as GridComponent).selectRow(index);
                (this.grid as GridComponent).startEdit();
            }
        });
    }
}

main.ts

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

Open dropdown edit popup on single click

You can also open the dropdown edit popup with a single click for dropdown-type columns. To do this, focus the element and invoke the EJ2 DropDownList showPopup method within the Grid’s actionComplete event. In this workflow, a global flag variable in the mouseup event ensures activation for the correct dropdown target column.

app.component.ts

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Column, EditEventArgs, EditService, EditSettingsModel, GridComponent, GridModule, PageService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule ],
  providers: [EditService, PageService, ToolbarService],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging='true' (load)='load($event)' (actionComplete)='onActionComplete($event)' height='220px'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100 isPrimaryKey='true'></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' width=120 format='C2'></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width=150></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class AppComponent implements OnInit {
  public data?: object[];
  public toolbar?: ToolbarItems[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public editSettings?: EditSettingsModel;
  public isDropdown = false;

  ngOnInit(): void {
    this.data = data;
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  }

  load(args: Object) {
    (this.grid as GridComponent).element.addEventListener('mouseup', (e: MouseEvent) => {
      if ((e.target as HTMLElement).classList.contains('e-rowcell')) {
        if ((this.grid as GridComponent).isEdit) {
          (this.grid as GridComponent).endEdit();
        }
        let rowInfo = (this.grid as GridComponent).getRowInfo(e.target as EventTarget);
        if (rowInfo && rowInfo.column && (rowInfo.column as Column).field  === 'ShipCountry') {
          this.isDropdown = true;
          (this.grid as GridComponent).selectRow((rowInfo.rowIndex as number));
          (this.grid as GridComponent).startEdit();
        }
      }
    });
  }

  onActionComplete(args: EditEventArgs) {
    if (args.requestType === 'beginEdit' && this.isDropdown) {
      this.isDropdown = false;
      let dropdownObj = ((args.form as HTMLFormElement).querySelector('.e-dropdownlist') as HTMLFormElement)['ej2_instances'][0] ;
      dropdownObj.element.focus();
      dropdownObj.showPopup();
    }
  }
}

main.ts

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