Edit in Angular Grid component

17 Sep 202524 minutes to read

The Grid component offers robust options for dynamically inserting, deleting, and updating records, enabling direct data modification within the grid. These features facilitate seamless CRUD (Create, Read, Update, Delete) operations for efficient data management.

To enable grid editing, configure the allowEditing, allowAdding, and allowDeleting properties within the editSettings to true.

Editing requires a primary key column to support full CRUD functionality. Define the primary key by setting columns.isPrimaryKey to true on the relevant column.

Edit actions can be initiated by double-clicking a row or by selecting a row and clicking the Edit button in the toolbar. Records can be added by clicking the Add button in the toolbar or via an external trigger that invokes the addRecord method. Use Save and Cancel to commit or discard changes from the toolbar during edit mode. Deletion is performed by selecting the target row and clicking the Delete button.

For CRUD operations, inject the EditService module in the @NgModule.providers section.

To explore available edit modes and types in Angular Grid, refer to the following video:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' height='273px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' [validationRules]='orderIDRules'
                    isPrimaryKey='true' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [validationRules]='customerIDRules' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit'
                     width=120  [validationRules]='freightRules' 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 editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;

    ngOnInit(): void {
        this.data = data;
        this.orderIDRules = { required: true, number: true };
        this.customerIDRules = { required: true };
        this.freightRules = { required: true,min:1, max:1000 };
        this.editSettings = {  allowEditing: true, allowAdding: true, allowDeleting: true, };
    }
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • If columns.isIdentity is enabled, the column will be treated as read-only when editing or adding records.
  • Use columns.allowEditing set to false to disable editing for specific columns.
  • The Insert key adds a new row, and the Delete key deletes the selected row in the grid.

Toolbar with edit options

The toolbar with edit option feature provides a built-in toolbar that includes items for editing actions. Using the toolbar, users can easily modify, update, or cancel grid data edits.

Enable this feature by configuring the toolbar property, specifying the desired items (such as Edit, Add, Delete, Update, and Cancel) to display in the grid’s toolbar.

Example demonstrating toolbar with edit options:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' [validationRules]='orderIDRules' textAlign='Right' isPrimaryKey='true' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [validationRules]='customerIDRules' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' [validationRules]='freightRules' textAlign= 'Right' width=120 format= 'C2'></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' [validationRules]='shipCountryRules'  width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;
    public shipCountryRules?: Object;

    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.orderIDRules = { required: true, number: true };
        this.customerIDRules = { required: true };
        this.freightRules =  {required: true ,number: true };
        this.shipCountryRules = { required: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Disable editing for specific columns

Grid columns can be made read-only to prevent editing. Configure the allowEditing property on the desired column and set it to false.

Example disabling editing for a specific column:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'

import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, Column } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  public data?: Object[];
  @ViewChild('grid') public grid?: GridComponent;
  @ViewChild('dropdown') public dropdown?: DropDownListComponent;
  public editSettings?: Object;
  public toolbar?: string[];
  public orderIDRules?: Object;
  public customerIDRules?: Object;
  public freightRules?: Object;
  public editparams?: Object;
  public pageSettings?: Object;
  public alignmentData: Object[] = [
    { text: 'Order ID', value: 'OrderID' },
    { text: 'Customer ID', value: 'CustomerID' },
    { text: 'Freight', value: 'Freight' },
    { text: 'Order Date', value: 'OrderDate' },
    { text: 'Ship Country', value: 'ShipCountry' },
  ];
  public dropdownFields: Object = { text: 'text', value: 'value' }; // Define fields for the dropdown
  public currentColumn?: Column;
  public ngOnInit(): void {
    this.data = data;
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    };
    this.toolbar = ['Add', 'Delete', 'Update', 'Cancel'];
    this.orderIDRules = { required: true, number: true };
    this.customerIDRules = { required: true };
    this.freightRules = { required: true };
    this.editparams = { params: { popupHeight: '300px' } };
    this.pageSettings = { pageCount: 5 };
  }

  public changeAlignment(args: ChangeEventArgs): void {
    // Reset the allowEditing property of the previously selected column
    if (this.currentColumn) {
      this.currentColumn.allowEditing = true;
    }
    // Update the 'allowEditing' property for the selected column
    this.currentColumn = this.grid?.getColumnByField((args.value as string)) as Column;
    this.currentColumn.allowEditing = false;
  }
}
<div style="display: flex">
    <label style="padding: 30px 17px 0 0;"> Select column to disable editing:</label>
    <ejs-dropdownlist #dropdown style="padding: 26px 0 0 0" index="0" width="150" 
      [dataSource]="alignmentData" [fields]="dropdownFields" (change)="changeAlignment($event)">
    </ejs-dropdownlist>
  </div>
<div style="padding-top:20px">
    <ejs-grid #grid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'
      [editSettings]='editSettings' [toolbar]='toolbar'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'
          [validationRules]='orderIDRules'></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customerIDRules'
          ></e-column>
        <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'
          editType='numericedit' [validationRules]='freightRules' >
        </e-column>
        <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit'
          textAlign='Right' ></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'
          [edit]='editparams' ></e-column>
      </e-columns>
    </ejs-grid>
</div>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • If isPrimaryKey is enabled, editing is automatically disabled for that column.
  • Rows can be set as non-editable using the actionBegin event. See example here.
  • Cells can be made read-only using the cellEdit event. See example here.

Editing template columns

Customizing the editing experience for specific columns is possible by defining an editing template. Use the field property to connect the column with its corresponding data field.

In this example, the ShipCountry column is rendered with a template:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' [validationRules]='orderIDRules' textAlign='Right' isPrimaryKey='true' width=100></e-column>
                    <e-column field='CustomerID' [validationRules]='customerIDRules'  headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right'
                    editType= 'numericedit' width=120  [validationRules]='freightRules' format= 'C2'></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150>
                        <ng-template #template let-data>
                            <a href="#">{{data.ShipCountry}}</a>
                        </ng-template>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderIDRules?: object;
    public customerIDRules?: object;
    public freightRules?: Object;

    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.orderIDRules = { required: true };
        this.freightRules =  { min:1, max:1000 };
        this.customerIDRules = { required: true };

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

Customizing the delete confirmation dialog

Personalize the delete confirmation dialog’s appearance and behavior—such as header, showCloseIcon, or height—using the toolbarClick event.

  • Enable the confirmation dialog for deletions by setting showDeleteConfirmDialog to true in editSettings.
  • Refer to the Grid Default text documentation for localization options.

Example customizing the delete confirmation dialog:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs, Item } from '@syncfusion/ej2-angular-navigations';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
  'en-US': {
      grid: {
          'OKButton':'YES',
          'CancelButton':'Discard' ,
          'ConfirmDelete': 'Are you sure you want to delete the selected Record?' 
      }
  }
});
@Component({
  imports: [ GridModule],
  providers: [EditService, ToolbarService, SortService, PageService],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-grid #grid [dataSource]="data" [editSettings]="editSettings" [toolbar]="toolbar" 
        (toolbarClick)="toolbarClick($event)">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="150"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="120"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="130"></e-column>
      </e-columns>
    </ejs-grid>
  `,
})
export class AppComponent {

  @ViewChild('grid')
  public grid?: GridComponent;
  public data?: Object[];
  public editSettings?: Object;
  public toolbar?: Object;

  public ngOnInit(): void {
    this.data = data;
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
      showDeleteConfirmDialog: true,
    };

    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  }
  toolbarClick(args: ClickEventArgs): void {
    if ((args.item as Item).text === 'Delete') {
        const dialogObj= ((this.grid as GridComponent).editModule as any).dialogObj   ;
        dialogObj.header = 'Delete Confirmation Dialog';
        dialogObj.showCloseIcon = true;    
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Single-click update of boolean column values

The grid allows boolean column values to be toggled with a single click in normal editing mode. Use the column template feature to render a CheckBox for direct interaction.

Example: Single-click editing with CheckBox in the Verified column.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule,CheckBoxModule ],
    providers: [EditService, ToolbarService ],
    standalone: true,
    selector: 'app-root',
    template: `
        <ejs-grid [dataSource]="data" [editSettings]="editSettings" [toolbar]="toolbar" height="315px">
          <e-columns>
            <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120" [validationRules]='orderIDRules'></e-column>
            <e-column field="CustomerID" headerText="Customer Name" width="120" [validationRules]='customerIDRules'></e-column>
            <e-column field="OrderDate" headerText="Order Date" editType="datepickeredit" format="M/d/yy" textAlign="Right" [validationRules]='dateRules' width="130" type="date"></e-column>
            <e-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="90" [validationRules]='freightRules'></e-column>
            <e-column field="Verified" headerText="Verified" textAlign="Right" width="90" [validationRules]='verifiedRules'>
              <ng-template #template let-data>
                <ejs-checkbox [(checked)]="data.Verified"></ejs-checkbox>
              </ng-template>
            </e-column>
          </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderData?: object|any;
    public orderIDRules?: object;
    public customerIDRules?: object;
    public freightRules?: object;
    public dateRules?: object;
    public verifiedRules?: object;

    ngOnInit(): void {
        this.data = data;
        this.orderIDRules = { required: true };
        this.customerIDRules = { required: true  };
        this.dateRules= { required: true  };
        this.verifiedRules= { required: true  };
        this.freightRules = { required: true, min: 1, max: 1000 };
        this.editSettings = {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
        };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Editing enum column values

Enum data is easily managed using the editTemplate with a DropDownList in the Grid’s edit form.

In the following example, the DropDownList component is rendered within the editTemplate for the Employee Feedback column using ngTemplate. The enumerated list data can be bound to the Employee Feedback column using the two-way binding (@bind-Value).

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService,ForeignKeyService , PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule ,ComboBoxModule} from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ToolbarItems, SaveEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
         DropDownListModule,
         ComboBoxModule
    ],

providers: [EditService, ToolbarService, SortService, ForeignKeyService,PageService],
standalone: true,
  selector: 'app-root',
  template: `<ejs-grid [dataSource]="details" [editSettings]="editSettings" [toolbar]="toolbar" (actionBegin)="actionBegin($event)">
    <e-columns>
      <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="90"></e-column>
      <e-column field="CustomerID" headerText="Employee Name" textAlign="Left" width="100"></e-column>
      <e-column field="FeedbackDetails" headerText="Employee Feedback" textAlign="Left" width="120">
        <ng-template #editTemplate let-data>
          <ejs-dropdownlist [(ngModel)]="orderData.FeedbackDetails" [dataSource]="dropDownEnumValue" [fields]="dropdownFields" popupHeight="150px">
          </ejs-dropdownlist>
        </ng-template>
      </e-column>
    </e-columns>
  </ejs-grid>`
})
export class AppComponent implements OnInit {

  public details?: EmployeeDetails[];
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItems[];
  public orderData?: EmployeeDetails | any;
  public orderIDRules?: object;
  public customerIDRules?: object;
  public freightRules?: object;
  public dropDownEnumValue: string[] = [];
  public dropdownFields: Object = { text: 'FeedbackDetails', value: 'FeedbackDetails' };

  ngOnInit(): void {
    this.details = data as EmployeeDetails[];
    this.orderIDRules = { required: true };
    this.freightRules = { required: true, min: 1, max: 1000 };
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    this.dropDownEnumValue = Object.keys(Feedback).filter((key: string) => !isNaN(Number((Feedback as any)[key])));
  }

  actionBegin(args: SaveEventArgs) {
    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
      this.orderData = Object.assign({}, args.rowData);
    }
    if (args.requestType === 'save') {
      (args.data as EmployeeDetails)['FeedbackDetails'] = this.orderData['FeedbackDetails'];
    }
  }

}

export interface EmployeeDetails {
  OrderID: number;
  CustomerID: string;
  FeedbackDetails: Feedback;
}

export enum Feedback {
  Positive = 0,
  Negative = 1,
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Edit complex columns

The edit template for complex column in Grid is used to customize the editing experience when dealing with complex data structures. This capability is particularly useful for handling nested data objects within grid columns. By default, the grid binds complex data to column fields using the dot (.) operator. However, when you render custom elements, such as input fields, in the edit template for a complex column, you must use the (___) underscore operator instead of the dot (.) operator to bind the complex object.

In the following sample, the input element is rendered in the edit template of the FirstName and LastName column. The edited changes can be saved using the name property of the input element. Since the complex data is bound to the FirstName and LastName column, The name property should be defined as Name__FirstName** and **Name__LastName, respectively, instead of using the dot notation (Name.FirstName and Name.LastName).

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit } from '@angular/core';
import { complexData } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
  selector: 'app-root',
  template: `
    <ejs-grid #grid [dataSource]="data" [height]="315" [editSettings]="editSettings" [toolbar]="toolbar">
      <e-columns>
        <e-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-column>
        <e-column field="Name.FirstName" headerText="First Name" width="200">
          <ng-template #editTemplate let-data>
              <input class="e-input" name="Name___FirstName" type="text" id="Name___FirstName" [value]="data.Name.FirstName" />
          </ng-template>
        </e-column>
        <e-column field="Name.LastName" headerText="Last Name" width="200">
          <ng-template #editTemplate let-data>
              <input class="e-input" type="text" name="Name___LastName" id="Name___LastName" [value]="data.Name.LastName" >
          </ng-template>
        </e-column>
        <e-column field="Title" headerText="Title" width="150" ></e-column>
      </e-columns>
    </ejs-grid>
  `,
})
export class AppComponent implements OnInit {
    
  public data?: object[];
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItems[];

  ngOnInit(): void {
    this.data = complexData;
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Editing foreign key columns

The Syncfusion Grid offers a powerful editing feature for foreign key columns, enhancing the default rendering of the DropDownList component during editing. This flexibility is particularly useful when you need to customize the editor for foreign key columns. By default, the Syncfusion Grid renders the DropDownList component as the editor for foreign key columns during editing. However, you can enhance and customize this behavior by leveraging the editTemplate property for the column using ng-template. The editTemplate property allows you to specify a cell edit template that serves as an editor for a particular column, accepting either a template string or an HTML element ID.

In the following code example, the Employee Name is a foreign key column. When editing, the ComboBox component is rendered instead of DropDownList.

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService,ForeignKeyService , PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule ,ComboBoxModule} from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit } from '@angular/core';
import { data, employeeData,columnDataType } from './datasource';
import {
  EditSettingsModel,
  ToolbarItems,
  SaveEventArgs,
} from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
         DropDownListModule,
         ComboBoxModule
    ],

providers: [EditService, ToolbarService, SortService, ForeignKeyService,PageService],
standalone: true,
  selector: 'app-root',
  template: `
        <ejs-grid [dataSource]="data" height="315" [editSettings]="editSettings"  [allowPaging]="true" [toolbar]="toolbar" (actionBegin)=" actionBegin($event)">
          <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="120"></e-column>
              <e-column field="EmployeeID" headerText="Employee Name" foreignKeyValue='FirstName'  [dataSource]="employeeData" width="150">
                  <ng-template #editTemplate let-data>
                      <ejs-combobox [(value)]="orderData.EmployeeID" [dataSource]="employees" [fields]="comboFields" >
                      </ejs-combobox>
                  </ng-template>
              </e-column>
              <e-column field="OrderDate" headerText="Order Date" format="yMd" type="date" textAlign="Right" width="130"></e-column>
              <e-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-column>
          </e-columns>
      </ejs-grid>`
})
export class AppComponent implements OnInit {
  public data?: object[];
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItems[];
  public orderData?: object | any;
  public orderIDRules?: object;
  public customerIDRules?: object;
  public employeeIDRules?: object;
  public employees: object[] = [];
  public employeeData: Object[] = employeeData;
  public comboFields: Object = { text: 'FirstName', value: 'EmployeeID' };

  ngOnInit(): void {
    this.data = data;
    this.orderIDRules = { required: true };
    this.customerIDRules = { required: true };
    this.employeeIDRules = { required: true };
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    this.employees = [
      { FirstName: 'Nancy', EmployeeID: 1 },
      { FirstName: 'Andrew', EmployeeID: 6 },
      { FirstName: 'Janet', EmployeeID: 3 },
      { FirstName: 'Margaret', EmployeeID: 4 },
      { FirstName: 'Steven', EmployeeID: 5 },
      { FirstName: 'Laura', EmployeeID: 8 }
    ];
  }
  actionBegin(args: SaveEventArgs) {
    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
      this.orderData = Object.assign({}, args.rowData);
    }
    if (args.requestType === 'save') {
      (args.data as columnDataType)['EmployeeID'] = this.orderData['EmployeeID'];
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Preventing duplicate rows with custom validation

The Syncfusion Angular Grid allows you to enforce constraints to prevent duplicate rows by customizing the validation logic within the Grid setup. This ensures data integrity by restricting duplicate entries in the OrderID column.

To prevent adding duplicate rows in the Grid, follow these steps:

  1. Implement Custom Validation: Define the orderIdCustomValidation function to check whether the entered OrderID already exists in the dataSource. This allows editing an existing row without triggering a duplicate error.

  2. Add Dynamic Validation Rules: Create the orderIDRules object to enforce unique OrderID values. Dynamically add this rule to the form during the save action.

  3. Handle Validation in the actionBegin event: In the actionBegin event, check if the requestType is save. Apply the validation rule before saving and cancel the action args.cancel = true if the validation fails.

For server-side validation to prevent adding duplicate rows, you can refer to the detailed guidance provided in our knowledge base. If you want to display the Grid’s validation tooltip instead of the alert used in our knowledge base, you can call the grid.editModule.formObj.validate() method in the Ajax/Fetch success function to display the Grid’s tooltip validation for the server side.

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

@Component({
  imports: [GridModule, FormsModule],
  providers: [EditService, ToolbarService, SortService, PageService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273'  (actionBegin)="actionBegin($event)">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [validationRules]='customerIDRules' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' 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 {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItems[];
  public orderIDRules?: object;
  public customerIDRules?: object;

  public orderIdCustomValidation(args: any): void {
    return (this.grid?.dataSource as Object[]).every((data: any) => {
      return data['OrderID'] + '' !== args['value'] || data['OrderID'] === (this.grid as any).editModule.editModule.args.rowData['OrderID']
    });
  }

  public actionBegin(args: any):void {
    if (args.requestType === 'save') {
      (this.grid as GridComponent).editModule.formObj.addRules('OrderID', this.orderIDRules as object);  // Add form validation rules dynamically.
      if (!(this.grid as GridComponent).editModule.formObj.validate()) { // Check dynamically added validation rules.
        args.cancel = true; // Prevent adding duplicate data action.
      }
      (this.grid as GridComponent).editModule.formObj.removeRules('OrderID'); // Remove form validation rules dynamically.
    }
  }
  
  public ngOnInit(): void {
    this.data = data;
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    this.orderIDRules = { required: true, min: [this.orderIdCustomValidation.bind(this), 'The entered value already exists in the column OrderID. Please enter a unique value.'] };
    this.customerIDRules = { required: true };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Performing CRUD actions externally

CRUD operations can be executed programmatically or via an external toolbar or form.

Using a separate toolbar

Invoke grid record operations programmatically using methods like addRecord, startEdit, deleteRecord, endEdit, and closeEdit.

Example with a separate toolbar for external grid operations:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'

import { Component, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-buttons';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        ToolbarModule ,
        DropDownListModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
  selector: 'app-root',
  template: `
      <div style="display: flex">
        <ejs-toolbar (clicked)="onToolbarClick($event)">
          <e-items>
              <e-item text="Add" id="add"></e-item>
              <e-item text="Edit" id="edit"></e-item>
              <e-item text="Delete" id="delete"></e-item>
              <e-item text="Update" id="update"></e-item>
              <e-item text="Cancel" id="cancel"></e-item>
          </e-items>
      </ejs-toolbar>
      </div>
      <div style="padding-top:20px">
          <ejs-grid #grid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'
            [editSettings]='editSettings'>
            <e-columns>
              <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'
                [validationRules]='orderIDRules'></e-column>
              <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customerIDRules'
                ></e-column>
              <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'
                editType='numericedit' [validationRules]='freightRules' >
              </e-column>
              <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit'
                textAlign='Right' ></e-column>
              <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'
                [edit]='editparams' ></e-column>
            </e-columns>
          </ejs-grid>
      </div>`,
  })
export class AppComponent {
  public data?: Object[];
  @ViewChild('grid') public grid?: GridComponent;
  public editSettings?: Object;
  public orderIDRules?: Object;
  public customerIDRules?: Object;
  public freightRules?: Object;
  public editparams?: Object;
  public pageSettings?: Object;
   public currentColumn: any;
  public ngOnInit(): void {
    this.data = data;
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
    };
    this.orderIDRules = { required: true, number: true };
    this.customerIDRules = { required: true };
    this.freightRules = { required: true };
    this.editparams = { params: { popupHeight: '300px' } };
    this.pageSettings = { pageCount: 5 };
  }

  public onToolbarClick(args: ClickEventArgs): void {
    switch ((args as any).item.id) {
      case 'add':
        (this.grid as GridComponent).addRecord();
        break;
      case 'edit':
        (this.grid as GridComponent).startEdit();
        break;
      case 'delete':
        (this.grid as GridComponent).deleteRecord();
        break;
      case 'update':
        (this.grid as GridComponent).endEdit();
        break;
      case 'cancel':
        (this.grid as GridComponent).closeEdit();
        break;
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Using an external form

Use an external form to perform edit actions outside of the default in-grid editing experience. The RowSelected property can trigger edit mode from a row selection in the custom form.

Example for editing using an external form:

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule, NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs'
import { Component, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { GridComponent, RowSelectEventArgs } from '@syncfusion/ej2-angular-grids';
import{ data } from "./datasource"

@Component({
  imports: [ GridModule, FormsModule, TextBoxModule, ButtonModule, NumericTextBoxAllModule,DropDownListModule],
  providers: [EditService, ToolbarService, SortService, PageService],
  standalone: true,
  selector: 'app-root',
  template: `
         <div class="row" >
              <div class="col-xs-6 col-md-3">
                <div>
                  <div class="form-row">
                    <div class="form-group col-md-12">
                      <label for="orderedit">OrderID</label>
                      <input class="form-control" [(ngModel)]="selectedProduct.OrderID" type="number" disabled />
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-12">
                      <label for="customeredit">CustomerID</label>
                      <ejs-textbox [(value)]="selectedProduct.CustomerID"></ejs-textbox>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-12">
                      <label for="freightedit">Frieght</label>
                      <ejs-numerictextbox [(value)]="selectedProduct.Freight"></ejs-numerictextbox>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-12">
                      <label for="countryedit">ShipCountry</label>
                      <ejs-dropdownlist [(value)]="selectedProduct.ShipCountry" [dataSource]="dropdown" [fields]="dropdownFields">
                      </ejs-dropdownlist>
                    </div>
                  </div>
                </div>
                <button ejs-button id="btn" (click)="save()">Save</button>
              </div>
              <div class="col-xs-6 col-md-9">
                <ejs-grid #grid [dataSource]="orders" height="315" width="500px" (rowSelected)="rowSelectHandler($event)" [editSettings]="editSettings">
                  <e-columns>
                    <e-column field="OrderID" headerText="OrderID" isPrimaryKey="true" textAlign="Right" width="120"></e-column>
                    <e-column field="CustomerID" headerText="CustomerID" textAlign="Right" width="120"></e-column>
                    <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-column>
                    <e-column field="ShipCountry" headerText="ShipCountry" textAlign="Right" width="120"></e-column>
                  </e-columns>
                </ejs-grid>
              </div>
            </div>
           `,
})
export class AppComponent {

  public orders:Object[] = data;
  @ViewChild('grid') public grid?:GridComponent;
  public dropdown: Object[] = [
    { shipCountry: 'Germany' },
    { shipCountry: 'Brazil' },
    { shipCountry: 'France' },
    { shipCountry: 'Belgium' },
    { shipCountry: 'Switzerland' },
    { shipCountry: 'Venezuela' },
    { shipCountry: 'USA' },
    { shipCountry: 'Mexico' },
    { shipCountry: 'Italy' },
    { shipCountry: 'Sweden' },
    { shipCountry: 'Finland' },
    { shipCountry: 'Spain' },
    { shipCountry: 'Canada' },
    { shipCountry: 'Portugal' },
    { shipCountry: 'Denmark' },
    { shipCountry: 'Austria' },
    { shipCountry: 'UK' },
    { shipCountry: 'Ireland' },
    { shipCountry: 'Norway' },
    { shipCountry: 'Argentina' },
  ];
  public selectedProduct: Order = new Order();
  public dropdownFields: Object = { text: 'shipCountry', value: 'shipCountry' };
  public editSettings: Object = { allowEditing: true };

  save(): void {
    const index = (this.grid as GridComponent).getSelectedRowIndexes()[0];
    (this.grid as GridComponent).updateRow(index, this.selectedProduct);
   }

  rowSelectHandler(args: RowSelectEventArgs ): void {
    (this as any).selectedProduct = { ...args.data }; 
  } 
}

export class Order {
  OrderID?: number;
  CustomerID?: string;
  Freight?: number;
  ShipCountry?: string;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting: Editing works only for the first row

Editing relies on the primary key. If isPrimaryKey is not set to true, edit or delete actions affect only the first row. Always ensure the primary key is defined for unique identification.

How to make a grid column always editable

To keep a column editable at all times, use a column template and handle input via the created event and updateRow method for user input management.

Example: Editable Freight column textbox template.

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, parentsUntil } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule
    ],

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' height='315px' (created)="created()">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=120></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width=130 textAlign='Right' format='yMd'></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width=140></e-column>
                    <e-column field='Freight' headerText='Receipt Amount' textAlign= 'Right' width=150>
                        <ng-template #template let-data>
                            <input id='' value='' class='custemp' type='text' style='width: 100%'>
                        </ng-template>
                </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid') public grid?: GridComponent;
    public editSettings?: Object;

    ngOnInit(): void {
        this.data = data;
    }
    created() {
        (this.grid as GridComponent).element.addEventListener('keyup', function (e) { // Bind the keyup event for the grid.
            if ((e.target as HTMLElement).classList.contains('custemp')) { // Based on this condition, you can find whether the target is an input element or not.
                var row = parentsUntil(e.target as HTMLElement, 'e-row');
                var rowIndex = (row as HTMLFormElement)['rowIndex']; // Get the row index.
                var uid = row.getAttribute('data-uid');
                var grid = (document.getElementsByClassName('e-grid')[0] as HTMLFormElement)['ej2_instances'][0];
                var rowData = grid.getRowObjectFromUID(uid).data; // Get the row data.
                rowData.Freight = ((e.target as HTMLFormElement)['value']); // Update the new value for the corresponding column.
                grid.updateRow(rowIndex, rowData); // Update the modified value in the row data.
            }
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • If a template column has an associated field property, values from the input will be stored in that field in the data object.

See also