HelpBot Assistant

How can I help you?

Edit Types in Angular Grid Component

19 Mar 202624 minutes to read

The Angular Grid component in Syncfusion supports a range of edit types, enabling customization of data entry and editing behaviors for column types. These edit types enhance the user editing experience and provide flexibility when managing various data types in the Grid.

Default cell edit type editors

The Syncfusion Grid provides in-built editors to facilitate efficient data entry according to column data types. Default editors are assigned based on the column data type, and are configured with the editType property.

The available default edit types are as follows:

Component	Edit Type value	Description
TextBox	`stringedit`	Renders a `TextBox` component for string data type columns.
NumericTextBox	`numericedit`	Renders a `NumericTextBox` component for integers, double, float, short, byte, long, long double, and decimal data types.
DropDownList	`dropdownedit`	Renders a `DropDownList` component for string data type columns with predefined options.
Checkbox	`booleanedit`	Renders a `CheckBox` component for boolean data type columns.
DatePicker	`datepickeredit`	Renders a `DatePicker` component for date data type columns.
DateTimePicker	`datetimepickeredit`	Renders a `DateTimePicker` component for date-time data type columns.

The following example demonstrates to define the editType for grid columns:

    <e-column field="CustomerName" headerText="Customer Name" editType="stringedit"></e-column>
    <e-column field="Frieght" headerText="Frieght" editType="numericedit'"></e-column>
    <e-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit"></e-column>
    <e-column field="OrderDate" headerText="Order Date" editType="datepickeredit"></e-column>
    <e-column field="OrderTime" headerText="Order Time" editType="datetimepickeredit"></e-column>
    <e-column field="Verified" headerText="Verified" editType="booleanedit"></e-column>

If edit type is not defined in the column, then it will be considered as the stringedit type (TextBox component).

Customizing the TextBox component for stringedit type

The TextBox component for string columns can be customized using its API. Configure properties through the columns->edit->params property to tailor behavior or appearance in the grid’s edit form.

Component	Edit Type	Description	Example Customized edit params
TextBox	stringedit	The `stringedit` type renders a TextBox component for string data type columns. To customize the `TextBox` component, refer to the TextBox API documentation for detailed information on available properties	params: { showClearButton : true}

The following sample code demonstrates the customization applied to TextBox component of “Customer ID” grid column:

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

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='265px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    isPrimaryKey='true' width=100></e-column>
                    <e-column field='CustomerID' [edit]='stringParams' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right'
                    editType= 'numericedit'  width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' 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 stringParams?: IEditCell;

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

Customizing the NumericTextBox for numericedit type

Customize the NumericTextBox component for numeric columns using its API and the columns->edit->params property.

Component	Edit Type	Description	Example Customized edit params
NumericTextBox	numericedit	The `numericedit` type renders a NumericTextBox component for integers, double, float, short, byte, long, long double and decimal data types columns. To customize the `NumericTextBox` component, refer to the NumericTextBox API documentation for detailed information on available properties.	params: { decimals: 2, value: 5 }

The following sample code demonstrates the customization applied to NumericTextBox component of “Freight” grid column:

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, IEditCell, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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='265px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' [validationRules]='orderIDRules'
                    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' [edit] ='numericParams'  [validationRules]='freightRules' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' editType= 'dropdownedit' [validationRules]='shipCityRules' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public numericParams?: IEditCell;
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;
    public shipCityRules?: 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, min: 1, max: 1000 };
        this.shipCityRules = { required: true };
        this.numericParams = {
            params: {
                decimals: 0,
                format: 'N',
                showClearButton: true,
                showSpinButton: false
            }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Restrict decimal input in NumericTextBox while editing

NumericTextBox allows decimal input by default. To restrict entries to whole numbers, use the validateDecimalOnType (set to true to block decimals) and decimals properties.

In the below demo, while editing the row the decimal point value is restricted to type in the NumericTextBox of “Freight” column.

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars';
import { EditService, EditSettingsModel, GridModule, IEditCell, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule,  DatePickerAllModule, FormsModule ],
    providers: [EditService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='265px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right'
                    editType= 'numericedit' [edit]='numericParams' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' 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 numericParams?: IEditCell;
    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.numericParams = { params: {
            validateDecimalOnType: true,
            decimals: 0,
            format: 'N' }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing the DropDownList for dropdownedit type

Customize the DropDownList editor via columns->edit->params. This allows configuration of DropDownList properties for string columns.

Component	Edit Type	Description	Example edit params
DropDownList	dropdownedit	The `dropdownedit` type renders a DropDownList component for string data type columns. To customize the DropDownList component, refer to the DropDownList API documentation for detailed information on available properties.	params: { value: ‘Germany’ }

The following sample code demonstrates the customization applied to DropDownList component of “Ship City” grid column:

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, IEditCell, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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='265px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' [validationRules]='orderIDRules' 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'></e-column>
                    <e-column field='ShipCity'  headerText='Ship City' editType='dropdownedit' [edit]='dropdownparams' [validationRules]='shipCityRules' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public dropdownparams?: IEditCell;
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;
    public shipCityRules?: 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, min: 1, max: 1000 };
        this.shipCityRules = { required: true };
        this.dropdownparams = {
            params: {
                showClearButton: true,
                popupHeight: 120
            }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Provide custom data source for DropDownList component

In Syncfusion’s Grid component, there is an option to provide a custom data source for the DropDownList component in the edit form. This feature allows defining a specific set of values for the DropDownList.

To achieve this, the columns->edit->params property can be utilized. This property allows defining the edit params for the column within the grid.

When setting a new data source using the edit params, a new query property must be specified for the DropDownList. The query property enables defining custom queries for data retrieval and filtering.

In the below demo, DropDownList is rendered with custom data source for the “Ship Country” column:

app.component.ts
main.ts
import { cascadeData } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, IEditCell, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { DataManager, Query } from '@syncfusion/ej2-data';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
    ],
    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='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' [validationRules]='shipCountryRules'
                     [edit]='countryParams' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

    public country: object[] = [
        { countryName: 'United States', countryId: '1' },
        { countryName: 'Australia', countryId: '2' },
        { countryName: 'India', countryId: '3' }
    ];

    ngOnInit(): void {
        this.data = cascadeData;
        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.shipCountryRules = { required: true };
        this.countryParams = {
            params: {
                dataSource: new DataManager(this.country),
                fields: { text: 'countryName', value: 'countryName' },
                query: new Query(),
                actionComplete: () => false
            }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable filtering in DropDownList editor

The Syncfusion^® Angular Grid component provides filtering for the DropDownList within the edit form. This feature enables selection of options from a predefined list and easier search for specific items using the built-in filtering feature.

Enable filtering by setting the allowFiltering property to true within the edit params. This will enable the filtering feature in the DropDownList.

In the following demo, filtering is enabled for the “Ship Country” column:

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

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

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='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' [validationRules]='shipCountryRules'
                     [edit]='countryParams' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

    ngOnInit(): void {
        this.data = cascadeData;
        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.shipCountryRules = { required: true };
        this.countryParams = {
            params: {
                allowFiltering: true,
               
            }
        };
    }
}
import { AppComponent } from './app.component';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Open the dropdown edit popup with a single click by focusing the dropdown element. This feature enables quick access and interaction with the dropdown options without the need for an additional click.

To achieve this, utilize the showPopup method provided by the EJ2 DropDownList component. This method can be invoked within the actionComplete event of the grid, which triggers when an action, such as editing, is completed. By calling the showPopup method in this event, open the popup for the dropdown edit.

To ensure that the dropdown column is the clicked edit target, set a global flag variable in the mouseup event along with load event. This flag variable determines if the clicked element corresponds to the dropdown column.

The following sample demonstrates to open the popup when focusing on the edit cell using the actionComplete and load events:

app.component.ts
main.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();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing the CheckBox for booleanedit type

Customize the CheckBox component using the columns->edit->params property.

Component	Edit Type	Description	Example edit params
CheckBox	booleanedit	The `booleanedit` type renders a `CheckBox` component for boolean data type. To customize the CheckBox component, refer to the CheckBox API documentation for detailed information on available properties.	params: { checked: true }

The following sample code demonstrates the customization applied to CheckBox component of “Verified” grid column:

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, IEditCell, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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='265px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' [validationRules]='orderIDRules' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120 [validationRules]='customerIDRules' ></e-column>
                    <e-column field='Freight' headerText='Freight' [validationRules]='freightRules' textAlign= 'Right'
                    editType= 'numericedit'  width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' editType= 'dropdownedit' [validationRules]='shipCityRules' width=150>
                    </e-column>
                    <e-column field="OrderDate" headerText="Order Date"  width="100" format='yyyy-MM-dd' editType= 'datetimepickeredit' [validationRules]='orderDateRules' ></e-column>
                    <e-column field='Verified' headerText='Verified' width='100'  [displayAsCheckBox]='true' 
                    editType= 'booleanedit' [edit]='booleanparams' ></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public booleanparams?: IEditCell;
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;
    public shipCityRules?: Object;
    public orderDateRules?: 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, min: 1, max: 1000 };
        this.shipCityRules = { required: true };
        this.orderDateRules = { required: true };
        this.booleanparams = {
            params: {
                disabled: true,
            }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing the DatePicker for datepickeredit type

Enhance the DatePicker component in grid edit form by customizing its properties. This enables configuration of various DatePicker features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the columns->edit->params property for powerful date selection control.

Component	Edit Type	Description	Example edit params
DatePicker	datepickeredit	The `datepickeredit` type renders a `DatePicker` component for date data type columns. To customize the DatePicker component, refer to the DatePicker API documentation for detailed information on available properties.	params: { format:’dd.MM.yyyy’ }

The following sample code demonstrates the customization applied to DatePicker component of “Order Date” grid column:

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, IEditCell, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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='265px'>
                    <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' width=120 [validationRules]='customerIDRules'></e-column>
                        <e-column field='Freight' headerText='Freight' [validationRules]='freightRules' textAlign= 'Right'
                        editType= 'numericedit'  width=120></e-column>
                        <e-column field='ShipCity' headerText='Ship City' editType= 'dropdownedit' [validationRules]='shipCityRules' width=150>
                        </e-column>
                        <e-column field="OrderDate" headerText="Order Date"  width="150" format='MM-dd-yyyy' 
                        editType= 'datepickeredit' [edit]='datepickerparams'  [validationRules]='orderDateRules' ></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public datepickerparams?: IEditCell;
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;
    public shipCityRules?: Object;
    public orderDateRules?: 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, min: 1, max: 1000 };
        this.shipCityRules = { required: true };
        this.orderDateRules = { required: true };
        this.datepickerparams = {
            params: {
                showClearButton: false,
                showTodayButton: false
            }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing the DateTimePicker for datetimepickeredit type

Enhance the DateTimePicker component in grid edit form by customizing its properties. This enables configuration of various DateTimePicker features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the columns->edit->params property for powerful date-time selection control.

Component	Edit Type	Description	Example edit params
DateTimePicker	datetimepickeredit	The `datetimepickeredit` type renders a `DateTimePicker` component for date time data type columns. Customize the DateTimePicker component by referring to the DateTimePicker API documentation for detailed information on available properties.	params: { value: new Date() }

The following sample code demonstrates the customization applied to DateTimePicker component of “Order Date” grid column:

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

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='265px'>
                <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' width=120 [validationRules]='customerIDRules'></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right'
                    editType= 'numericedit'  width=120 [validationRules]='freightRules'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' editType= 'dropdownedit' [validationRules]='shipCityRules' width=150>
                    </e-column>
                    <e-column field="OrderDate" headerText="Order Date"  width="150" 
                    format='MM-dd-yyyy hh mm aa' editType= 'datetimepickeredit' [validationRules]='orderDateRules' [edit]='datetimepickerparams' ></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public datetimepickerparams?: IEditCell;
    public orderIDRules?: Object;
    public customerIDRules?: Object;
    public freightRules?: Object;
    public shipCityRules?:Object;
    public orderDateRules?: 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,min:1, max:1000 };
        this.shipCityRules = { required: true };
        this.orderDateRules = { required: true };
        this.datetimepickerparams = { params: {
            showClearButton : false,
            format:'MM-dd-yyyy hh:mm aa',
            start:'Year',
           }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Restrict minimum selectable date in DatePicker

Set a minimum selectable date dynamically in the DatePicker editor by configuring the minimum property in edit params. This prevents selection of dates prior to a specified value.

Example with dynamic min date:

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridComponent, GridModule, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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" [editSettings]="editSettings" [toolbar]="toolbar" height="250px"   (actionBegin)='actionBegin($event)'>
          <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-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
    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'];
    }
    actionBegin(args: any): void {
      if (args.requestType === 'beginEdit') {
        let minDate = (args as any).rowData['OrderDate'];
        (this.grid as GridComponent).columns.forEach((column) => {
          if ((column as any).field === 'OrderDate') {
            (column as any).edit.params = { min: minDate };
          }
        });
      }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Accessing editor component instances

Accessing editor components in the Syncfusion^® Angular Grid enables seamless interaction with editor instances associated with cells during editing or adding actions. This feature is especially valuable when performing custom actions, retrieving data from the editor, or manipulating its properties during editing or adding operations in the grid.

Access the component instance from the component element using the ej2_instances property. This property provides access to the instance of the editor component associated with a cell.

In the below demo, access the editor component instance while adding or editing actions in the actionComplete event.

app.component.ts
main.ts
import { data } from './datasource';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditEventArgs, EditService, EditSettingsModel, GridModule, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [ GridModule, DatePickerAllModule,FormsModule, TimePickerModule, FormsModule,TextBoxModule, MultiSelectModule, AutoCompleteModule, DropDownListModule ],
  providers: [EditService, ToolbarService, SortService, PageService],
  standalone: true,
  selector: 'app-root',
  template: `
        <ejs-grid [dataSource]="data"  height='250px' [editSettings]="editSettings" [toolbar]="toolbar" (actionComplete)="access($event)">
            <e-columns>
                <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-column>                
                <e-column field="CustomerID" headerText="Customer ID" type="string" [validationRules]='customerIDRules' 
                width="120"></e-column>                
                <e-column field="Freight" headerText="Freight" textAlign="Right" [validationRules]='freightRules' 
                format="C2" editType='numericedit' width="120" ></e-column>                               
                <e-column field="ShipCountry" headerText="Ship Country"  width="150" editType='dropdownedit'>
                </e-column>                
            </e-columns>
        </ejs-grid>`
})
export class AppComponent {

  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.customerIDRules = { required: true };
    this.freightRules = { required: true };
  }
  public access(args: EditEventArgs): void {
    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
      const tr = args.row as HTMLTableRowElement;
      const numericTextBox = tr.querySelector('.e-numerictextbox');
      if (numericTextBox) {
        const numericTextBoxInstance = (numericTextBox as HTMLFormElement)['ej2_instances'][0];
        numericTextBoxInstance.element.style.backgroundColor = 'light pink';
        numericTextBoxInstance.element.style.color = 'black';
        numericTextBoxInstance.element.style.border = '2px solid red';
        numericTextBoxInstance.element.style.textAlign = 'center';
        numericTextBoxInstance.max = 1000;
        numericTextBoxInstance.min = 1;
      }
      const dropDownList = tr.querySelector('.e-dropdownlist') ;
      if (dropDownList) {
        const dropDownListInstance = (dropDownList as HTMLFormElement)['ej2_instances'][0];
        dropDownListInstance.showPopup(); // Open the dropdown list
      }
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Rendering custom cell editors

Render custom editors for grid columns using the editTemplate property, and for advanced scenarios, by using custom create, write, read, and destroy methods in the edit property.

For custom components in editTemplate, use two-way binding (@bind-Value) to ensure updates propagate to the Grid.

Render textArea in the edit form

The Syncfusion^® Grid allows rendering a textArea within the Grid’s edit form for a specific column. This feature is especially valuable when there is a need to edit and display multi-line text content, providing an efficient way to manage extensive text data within the Grid’s columns.

To render a textArea in the edit form, it is necessary to define an editTemplate for the column using ng-template. The editTemplate property specifies the cell edit template that is used as an editor for a particular column. It can accept either a template string or an HTML element ID.

When using a text area, please use Shift+Enter to move to the next line. By default, pressing Enter will trigger a record update while in edit mode.

The following example demonstrates to render a textArea component in the “Ship Adress” column of the Syncfusion grid. The valueAccessor property is utilized to split the text into multiple lines within the grid column:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'
                (actionBegin)='actionBegin($event)'>
                <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 Name' 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' editType='datepickeredit' format='yMd' textAlign='Right'></e-column>
                    <e-column field='ShipAddress' headerText='Ship Address'  [valueAccessor]="valueAccessor" [disableHtmlEncode]=false  width=150>
                        <ng-template #editTemplate let-data>
                            <ejs-textbox id="ShipAddress" [multiline]='true'
                            [(ngModel)]="orderData.ShipAddress" ></ejs-textbox>
                        </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 valueAccessor = (field: string, data:columnDataType) => {
        const value = data.ShipAddress;
        return (value !== undefined) ? value.split('\n').join('<br>') : '';
    };

    ngOnInit(): void {
        this.data = data;
        this.orderIDRules = { required: true };
        this.customerIDRules = { required: true, minLength: 5 };
        this.freightRules = { required: true, min: 1, max: 1000 },
            this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['ShipAddress'] = this.orderData['ShipAddress'];
        }
    }

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

Prevent Enter key from saving edits in a multiline textbox

Override the default Enter key behavior in multiline textboxes by using the stopPropagation method in the textbox’s focus event, ensuring Enter inserts a new line instead of saving the edit.

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { FocusInEventArgs } from '@syncfusion/ej2-inputs';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'
               (actionBegin)='actionBegin($event)'>
                    <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 Name' 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' editType='datepickeredit' 
                    format='yMd' textAlign='Right'></e-column>
                        <e-column field='ShipAddress' headerText='Ship Country'  [valueAccessor]="valueAccessor" 
                        [disableHtmlEncode]=false  width=150>
                            <ng-template #editTemplate let-data>
                                <ejs-textbox id="ShipAddress" [multiline]='true' (focus)="onFocus($event)"
                                [(ngModel)]="orderData.ShipAddress" ></ejs-textbox>
                            </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 valueAccessor = (field: string, data:columnDataType) => {
        const value = data.ShipAddress;
        return (value !== undefined) ? value.split('\n').join('<br>') : '';
    };

    ngOnInit(): void {
        this.data = data;
        this.orderIDRules = { required: true };
        this.customerIDRules = { required: true, minLength: 5 };
        this.freightRules = { required: true, min: 1, max: 1000 },
            this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['ShipAddress'] = this.orderData['ShipAddress'];
        }
    }

    onFocus(args: FocusInEventArgs): void {
        ((args.event as Event).target as EventTarget).addEventListener('keydown', (e) => {
            if ((e as KeyboardEvent).key === 'Enter') {
                e.stopPropagation();
            }
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render AutoComplete in the edit form

The Syncfusion^® Grid allows rendering an AutoComplete component within the grid’s edit form for a specific column. This feature is especially valuable when there is a need to provide a dropdown like auto suggestion and input assistance for data entry in the grid’s columns.

To render an AutoComplete component in the edit form, it is necessary to define an editTemplate for the column using ng-template. The editTemplate property specifies the cell edit template that used as an editor for a particular column. It can accept either a template string or an HTML element ID.

The following example demonstrates to render an AutoComplete component in the “Customer ID” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [ GridModule, DatePickerAllModule, FormsModule, TimePickerModule, FormsModule,TextBoxModule, MultiSelectModule, AutoCompleteModule, DropDownListModule ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'
                (actionBegin)='actionBegin($event)'>
                <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 Name' width='120'>
                        <ng-template #editTemplate let-data>
                            <ejs-autocomplete [dataSource]='autoCompleteData' [(value)]='orderData.CustomerID'></ejs-autocomplete>
                        </ng-template>
                    </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' editType='datepickeredit' 
                        format='yMd' textAlign='Right'></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 editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderData?: object | any;
    public orderIDRules?: object;
    public customerIDRules?: object;
    public freightRules?: object;
    public autoCompleteData: { [key: string]: Object }[] = [
        { value: 'VINET', text: 'VINET' },
        { value: 'TOMSP', text: 'TOMSP' },
        { value: 'HANAR', text: 'HANAR' },
        { value: 'VICTE', text: 'VICTE' },
        { value: 'SUPRD', text: 'SUPRD' },
    ];

    public fields = { value: 'value', text: 'text' };

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

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            (this.orderData as object) = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['CustomerID'] = this.orderData['CustomerID'];
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render MaskedTextBox in the edit form

The Syncfusion^® Grid allows rendering an MaskedTextBox component within the grid’s edit form for a specific column. This feature is especially useful when there is a need to provide masked input fields that require a specific format, such as phone numbers or postal codes.

To render a MaskedTextBox component in the edit form, it is necessary to define an editTemplate for the column using ng-template. The editTemplate property specifies the cell edit template that used as an editor for a particular column. It can accept either a template string or an HTML element ID.

Here’s an example to render a MaskedTextBox component in the “Customer Number” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, ForeignKeyService, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { MaskedTextBoxModule, TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule,
        MaskedTextBoxModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService, ForeignKeyService],
    standalone: true,
    selector: 'app-root',
    template: `
        <ejs-grid #grid [dataSource]='data' [allowPaging]='true' height='220px'
            [editSettings]='editSettings' [toolbar]='toolbar' 
            (actionBegin)='actionBegin($event)'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' isPrimaryKey='true' 
                width="100"></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width="120"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width="100"></e-column>
                <e-column field='CustomerNumber' headerText='Customer Number' width="140">
                    <ng-template #editTemplate let-data>
                        <ejs-maskedtextbox id="masktextbox" #mask name="CustomerNumber" mask='000-000-0000' 
                        [(value)]="orderData.CustomerNumber"></ejs-maskedtextbox>
                    </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;

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

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['CustomerNumber'] = this.orderData['CustomerNumber'];
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render DropDownList component in edit form

The Syncfusion^® Grid allows rendering a DropDownList component within the Grid’s edit form for a specific column. This feature is valuable when there is a need to provide a convenient way to select options from a predefined list while editing data in the grid’s edit form.

To render a DropDownList component in the edit form, it is necessary to define an editTemplate for the column using ng-template. The editTemplate property specifies the cell edit template that used as an editor for a particular column. It can accept either a template string or an HTML element ID.

The following example demonstrates to render a DropDownList component in the “Ship Country” column of the Syncfusion Grid .The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'
                (actionBegin)='actionBegin($event)'>
                <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 Name' width='120'>
                    </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' editType='datepickeredit' 
                        format='yMd' textAlign='Right'></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='150'>
                    <ng-template #editTemplate let-data>
                    <ejs-dropdownlist [dataSource]='selectDatasource' [(value)]='orderData.ShipCountry'></ejs-dropdownlist>
                </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 selectDatasource = [
        { text: 'Germany', value: 'Germany' },
        { text: 'Brazil', value: 'Brazil' },
        { text: 'Belgium', value: 'Belgium' },
        { text: 'Switzerland', value: 'Switzerland' },
        { text: 'Venezuela', value: 'Venezuela' },
        { text: 'Austria', value: 'Austria' },
        { text: 'Mexico', value: 'Mexico' },
    ];

    public fields = { value: 'value', text: 'text' };

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

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['ShipCountry'] = this.orderData['ShipCountry'];
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render images in the DropDownList editor component using the item template

The Syncfusion^® Grid allows rendering images in the DropDownList editor component. This feature is valuable when there is a need to display images for each item in the dropdown list of a particular column, enhancing the visual representation of the data.

To render a DropDownList in the edit form, it is necessary to define an editTemplate for the column using ng-template. The editTemplate property specifies the cell edit template that is used as an editor for a particular column. It can accept either a template string or an HTML element ID.

To display an image in the DropDownList editor component, the itemTemplate property can be utilized. This property allows customization of the content of each item in the dropdown list.

The following example demonstrates to render images in the DropDownList editor component using the itemTemplate within the “Employee Name” column of the Syncfusion grid. Additionally, the actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { FormsModule } from '@angular/forms';
import { GridModule, 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 { columnDataType, data, employeeData } from './datasource';
import { GridComponent, EditService, ToolbarService, ToolbarItems, EditSettingsModel, ForeignKeyService, SaveEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService, ForeignKeyService],
    standalone: true,
    selector: 'app-root',
    template: `
            <ejs-grid #grid [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" (actionBegin)="actionBegin($event)" [editSettings]="editOptions" [toolbar]="toolbarItems" height="220" >
            <e-columns>
                <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" [validationRules]="orderIDRules" isPrimaryKey="true"></e-column>
                <e-column field="EmployeeID" foreignKeyValue='FirstName' foreignKeyField='EmployeeID' [dataSource]='employeeData' headerText="Employee Name" width="220">
                <ng-template #editTemplate let-data>
                    <ejs-dropdownlist [dataSource]='employeeData' [(ngModel)]="orderData.EmployeeID" [fields]='dropdownFields' [itemTemplate]="itemTemplate">
                    <ng-template #itemTemplate let-data>
                        <div>
                        <img class="empImage" width="50px" [src]="'https://ej2.syncfusion.com/demos/src/grid/images/' + data.EmployeeID + '.png'" alt="employee" />
                        <div class="ename">{{ data.FirstName }}</div>
                        </div>
                    </ng-template>
                    </ejs-dropdownlist>
                </ng-template>
                </e-column>
                <e-column field="Freight" headerText="Freight" width="100" format="C2" textAlign="Right" editType="numericedit"></e-column>
                <e-column field="ShipName" headerText="Ship Name" width="170"></e-column>
                <e-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit"></e-column>
            </e-columns>
            </ejs-grid>`,
})
export class AppComponent {

    public data?: Object[];
    public pageSettings?: Object;
    public toolbarItems?: ToolbarItems[];
    public editOptions?: EditSettingsModel;
    public employeeData?: Object;
    public orderIDRules?: Object;
    public orderData?: object | any;
    public dropdownFields?: Object;

    @ViewChild('grid')
    public grid?: GridComponent;

    public ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageCount: 5 };
        this.toolbarItems = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.employeeData = employeeData;
        this.editOptions = {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
            mode: 'Normal',
        };
        this.orderIDRules = { required: true };
        this.dropdownFields = { text: 'FirstName', value: 'EmployeeID' };
    }

    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));

Render Multiple columns in DropDownList component

The Syncfusion^® Grid supports rendering a DropDownList component within the Grid’s edit form for a specific column. This feature is useful for displaying detailed information for each item in the dropdown list during column editing.

Define an editTemplate for the column using ng-template. The editTemplate property specifies the cell edit template used as an editor for a particular column and can accept either a template string or an HTML element ID.

The DropDownList has been provided with several options to customize each list item, group title, selected value, header, and footer element. By default, list items can be rendered as a single column in the DropDownList component. Instead of this, multiple columns can be rendered. This can be achieved by using the headerTemplate and itemTemplate properties of the DropDownList component.

The following example demonstrates to render a DropDownList component with multiple columns within in the “Ship Country” column. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule , TimePickerModule} from '@syncfusion/ej2-angular-calendars';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { MultiSelectModule, DropDownListModule, AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { Component, OnInit } from '@angular/core';
import { columnDataType, data } from './datasource';
import { GridModule, EditService, ToolbarService, SortService, PageService, EditSettingsModel, ToolbarItems,SaveEventArgs } from '@syncfusion/ej2-angular-grids';
import { Query } from '@syncfusion/ej2-data';

@Component({
    imports: [
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        DropDownListModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'
        (actionBegin)='actionBegin($event)'>
        <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 Name' width='120'></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' editType='datepickeredit' 
                format='yMd' textAlign='Right'></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' width=300>
                <ng-template #editTemplate let-data3>
                    <ejs-dropdownlist [dataSource]='data' 
                    [fields]='fields' [query]='query'[(value)]="orderData.ShipCountry">
                    <ng-template #headerTemplate="" let-data2="">
                    <table><tr><th>EmployeeID</th><th>ShipCountry</th></tr></table>
                    </ng-template>
                        <ng-template #itemTemplate let-data1>
                        <div class="e-grid">
                        <table class="e-table">
                            <tbody>
                                <tr>
                                    <td class="e-rowcell">{{ data1.EmployeeID }}</td>
                                    <td class="e-rowcell">{{ data1.ShipCountry }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                        </ng-template>
                    </ejs-dropdownlist>
                </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 freightRules?: object;
    public fields = { text: 'ShipCountry' };
    public query: Query = new Query()
        .from('data')
        .select(['EmployeeID', 'ShipCountry', 'OrderID'])
        .take(6);

    ngOnInit(): void {
        this.data = data;
        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'];
    }

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['ShipCountry'] = this.orderData['ShipCountry'];
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render ComboBox component in edit form

The Syncfusion^® Grid supports rendering a ComboBox component within the Grid’s edit form for a specific column. This feature is useful for providing a drop-down selection with auto-suggestions for data entry.

The following example demonstrates to render a ComboBox component in the “Ship Country” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

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

providers: [EditService, ToolbarService, SortService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'
                (actionBegin)='actionBegin($event)'>
                <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 Name' width='120'></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' editType='datepickeredit' 
                        format='yMd' textAlign='Right'></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='150'>
                        <ng-template #editTemplate let-data>
                            <ejs-combobox [dataSource]='selectDatasource' [(ngModel)]='orderData.ShipCountry'></ejs-combobox>
                        </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 selectDatasource = [
        { text: 'Germany', value: 'Germany' },
        { text: 'Brazil', value: 'Brazil' },
        { text: 'Belgium', value: 'Belgium' },
        { text: 'Switzerland', value: 'Switzerland' },
        { text: 'Venezuela', value: 'Venezuela' },
        { text: 'Austria', value: 'Austria' },
        { text: 'Mexico', value: 'Mexico' },
    ];

    public fields = { value: 'value', text: 'text' };

    ngOnInit(): void {
        this.data = data;
        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'];
    }

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['ShipCountry'] = this.orderData['ShipCountry'];
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render TimePicker component in edit form

The Syncfusion^® Grid supports rendering a TimePicker component within the grid’s edit form for a specific column. This feature is useful for providing a time input, such as appointment times or event schedules, for editing in the grid.

The following example demonstrates to render a TimePicker component in the “Order Date” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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'
                (actionBegin)='actionBegin($event)'>
                <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 Name' width='120'></e-column>
                    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'  >
                    </e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='150'>
                    </e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='140' 
                    format='yMd' editType="DatePickerEdit" textAlign='Right'></e-column>
                    <e-column field='OrderDate' headerText='Order Time' width='140' 
                    format='hh :mm a ' textAlign='Right'>
                        <ng-template #editTemplate let-data>
                        <ejs-timepicker   [(value)]='orderData.OrderDate'></ejs-timepicker >
                       </ng-template>
                        </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 editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderData?: object | any;
    public orderIDRules?: object;
    public customerIDRules?: object;
    public freightRules?: object;

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

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['OrderDate'] = this.orderData['OrderDate'];
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render MultiSelect component in edit form

The Syncfusion^® Grid supports rendering a MultiSelect component within the Grid’s edit form, enabling selection of multiple values from a dropdown list when editing a specific column. This feature is useful when multiple selections are required for a column.

The following example demonstrates to render a MultiSelect component in the “Ship City” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnType, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, PageService, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@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' (actionBegin)='actionBegin($event)' >
                <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 Name' width='120'></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' editType='datepickeredit' 
                        format='yMd' textAlign='Right'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width='150'>
                    <ng-template #editTemplate let-data>
                        <ejs-multiselect [dataSource]='multiselectDatasource' 
                        [(value)]="orderData.ShipCity"  [fields]='fields'></ejs-multiselect>
                    </ng-template>
                    </e-column>
                </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public orderData: { ShipCity: string[] } = { ShipCity: [] };
    public orderIDRules?: object;
    public customerIDRules?: object;
    public freightRules?: object;
    public multiselectDatasource = [
        { value: 'Reims', text: 'Reims' },
        { value: 'Münster', text: 'Münster' },
        { value: 'Rio de Janeiro', text: 'Rio de Janeiro' },
        { value: 'Lyon', text: 'Lyon' },
        { value: 'Charleroi', text: 'Charleroi' }
    ];
    public fields = { value: 'value', text: 'text' };

    ngOnInit(): void {
        this.data = data;
        this.orderIDRules = { required: true };
        this.customerIDRules = { required: true, minLength: 5 };
        this.freightRules = { required: true, min: 1, max: 1000 };
        this.editSettings = {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
        };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }
    actionBegin(args: SaveEventArgs) { 
       
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            (this.orderData as Object)= Object.assign({}, args.rowData);
           
            (this.orderData as columnDataType)['ShipCity'] = (this.orderData as columnDataType)['ShipCity']? ((this.orderData as columnDataType)['ShipCity'] as any).split(','):[];
            
        } 
        if (args.requestType === 'save') {
            (args.data as columnType)['ShipCity'] = (this.orderData as columnDataType)['ShipCity'].join(',');  
          }

    }
  
}

export interface columnDataType{
  ShipCity: string[];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render RichTextEditor component in edit form

The Syncfusion^® Angular Grid allows rendering the RichTextEditor component within the edit form. This enables formatting and styling text content using bold, italic, underline, bullet lists, numbered lists, and other formatting options.

Set the allowTextWrap property of the corresponding grid column to true. Enabling this property allows the rich text editor component to adjust its width and wrap text content to fit within the boundaries of the column.

The following example demonstrates to render a RichTextEditor component in the “Ship Address” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { columnDataType, data } from './datasource';
import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridComponent, GridModule, IEditCell, PageService, PageSettingsModel, SaveEventArgs, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { FocusInEventArgs, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        CommonModule,
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        RichTextEditorAllModule
    ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `
        <ejs-grid #normalgrid [dataSource]="data" allowPaging="true" [pageSettings]="pageOptions"
        [editSettings]="editSettings" [toolbar]="toolbar" (actionBegin)="actionBegin($event)" height='220px'>
            <e-columns>
                <e-column field="OrderID" headerText="Order ID" width="100" textAlign="Right" isPrimaryKey="true"
                    [validationRules]="orderIDRules">
                </e-column>
                <e-column field="CustomerID" headerText="Customer ID" [validationRules]="customerIDRules" width="100"></e-column>
                <e-column field="Freight" headerText="Freight" width="100" format="C2" textAlign="Right"
                    editType="numericedit" [validationRules]="freightRules">
                </e-column>
                <e-column field="OrderDate" headerText="Order Date" width="100" editType="datetimepickeredit"
                    [format]="formatoptions" textAlign="Right">
                </e-column>
                <e-column field="ShipAddress" headerText="Ship Address" width="150" editType="textarea" [disableHtmlEncode]="false">
                    <ng-template #editTemplate let-data1>
                        <div *ngIf="orderData && orderData.ShipAddress !== undefined">
                            <ejs-richtexteditor id="rteEdit" [(value)]="orderData.ShipAddress" (focus)="onFocus($event)" #rteEdit>
                            </ejs-richtexteditor>
                        </div>
                    </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 editParams?: IEditCell;
    public formatoptions?: Object;
    public pageOptions?: PageSettingsModel;
    @ViewChild('normalgrid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.orderIDRules = { required: true, number: true };
        this.customerIDRules = { required: true };
        this.freightRules = { required: true };
        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' };
        this.editSettings = {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
        };
        this.pageOptions = { pageSizes: true, pageSize: 8 };

        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }

    actionBegin(args: SaveEventArgs) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            this.orderData = Object.assign({}, args.rowData);
        }
        if (args.requestType === 'save') {
            (args.data as columnDataType)['ShipAddress'] = this.orderData['ShipAddress'];
        }
    }
    onFocus(args: FocusInEventArgs): void {
        ((args.event as Event).target as EventTarget).addEventListener('keydown', (e) => {
            if ((e as KeyboardEvent).key === 'Enter') {
                e.stopPropagation();
            }
        });
    }

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

Render Upload component in edit form

The Syncfusion^® Angular Grid allows rendering an Uploader component within the grid’s edit form. This enables uploading and managing files or images in a specific column during data editing.

The following example demonstrates to render a Upload component in the “Order Image” column of the Syncfusion Grid. The actionBegin event is handled to update the edited value in the grid when the save button is clicked:

app.component.ts
main.ts
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { MultiSelectModule, DropDownListModule, AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { Component, OnInit, NgModule } from '@angular/core';
import { employeeData } from './datasource';
import { EditSettingsModel,ToolbarItems,SaveEventArgs, GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids';
import { FileInfo, SuccessEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [ 
        GridModule,
        DatePickerAllModule,
        FormsModule,
        TimePickerModule,
        FormsModule,
        TextBoxModule,
        MultiSelectModule,
        AutoCompleteModule,
        UploaderModule
        ],
    providers: [EditService, ToolbarService, SortService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `
        <ejs-grid [dataSource]='data' allowPaging='true' height='220px' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'>
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' isPrimaryKey='true' width=100></e-column>
                <e-column field='FirstName' headerText='First Name' textAlign='Left'  width=120></e-column>
                <e-column field='LastName' headerText='Last Name'  textAlign='Left' width=120></e-column>
                <e-column field='Title' headerText='Title'  textAlign='Left' width=120 ></e-column>
                <e-column headerText='Employee Image' width='150' textAlign='Center'>
                    <ng-template #template let-data>
                        <div class="image">
                        <img [src]="!data.Image ? 'https://ej2.syncfusion.com/angular/demos/assets/grid/images/' + data.EmployeeID + '.png' : data.Image"  alt="{{data.EmployeeID}}" />
                        </div>
                    </ng-template>
                    <ng-template #editTemplate let-data>
                        <ejs-uploader #defaultupload (success)="onUploadSuccess($event)" [asyncSettings]='path' multiple='false'></ejs-uploader>
                    </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 strm?:string;
    public path: object = {
        saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'
    };

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

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

    onUploadSuccess(args: SuccessEventArgs) {
        if (args.operation === 'upload') {
            const fileBlob = (args.file as FileInfo).rawFile as Blob;
            const file = new File([fileBlob], (args.file as FileInfo).name);
            this.strm = this.getBase64(file);
        }
    }

    getBase64(file:File): string {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            this.strm = reader.result as string;
        };
        return (this.strm as string); 
    }
}

export interface columnDataType{
    Image?: string;
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To prevent accidentally closing the cell editor (particularly with complex custom editors), add the edit-custom-template class to custom component roots and set the cssClass property to include edit-custom-template for Syncfusion editors when needed.

Rendering custom cell editors using external functions

The Syncfusion^® Angular Grid provides powerful capabilities for rendering custom cell editors, enabling the addition of specialized custom components to specific columns. This feature is essential for editing cell values using custom input elements or controls tailored to specific data types or workflows.

To utilize the custom cell editor template feature, implement these four essential functions:

Function	Purpose	When Triggered
`create`	Create the DOM element or component container	During component initialization
`write`	Create the custom component and assign default values	When editing begins on the cell
`read`	Extract and return the edited value from the component	When saving changes to the cell
`destroy`	Clean up and remove the component	When exiting edit mode or closing the editor

Example: AutoComplete as custom editor

Define a custom editor with the edit API for AutoComplete in the “Customer ID” column:

app.component.ts
main.ts
import { purchaseData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import {  EditService, EditSettingsModel, GridComponent, GridModule, IEditCell, PageService, PageSettingsModel, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';

@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' [allowPaging]='true' [editSettings]='editSettings' [pageSettings]='pageOptions' [toolbar]='toolbar' height='220px'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' isPrimaryKey='true'  width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' type= 'string' [edit]='daParams' width=140></e-column>
        <e-column field='Freight' headerText='Freight' type= 'number' textAlign= 'Right' editType= 'numericedit' format= 'C2' width=120></e-column>
        <e-column field='OrderDate' headerText='Order Date' type= 'date' format= 'yMd' editType= 'datepickeredit' width=150></e-column>
      </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {
  public data?: object[];
  @ViewChild('grid') public grid?: GridComponent;
  public editSettings?: EditSettingsModel;
  public pageOptions?: PageSettingsModel;
  public toolbar?: ToolbarItems[];
  public daParams?: IEditCell;
  public inpuEle?: HTMLElement;
  public autoCompleteIns?: AutoComplete;
  public autoCompleteData: { [key: string]: Object }[] = [
    { CustomerID: 'VINET', Id: '1' },
    { CustomerID: 'TOMSP', Id: '2' },
    { CustomerID: 'HANAR', Id: '3' },
    { CustomerID: 'VICTE', Id: '4' },
    { CustomerID: 'SUPRD', Id: '5' },
  ];

  public createCustomerIDFn = () => {
    this.inpuEle = document.createElement('input');
    return this.inpuEle;
  }
  public destroyCustomerIDFn = () => {
    this.autoCompleteIns?.destroy();
  }
  public readCustomerIDFn = () => {
    return this.autoCompleteIns?.value;
  }
  public writeCustomerIDFn = (args: any) => {
    this.autoCompleteIns = new AutoComplete({
      allowCustom: true,
      value: args.rowData[args.column.field],
      dataSource: this.autoCompleteData ,
      fields: { value: 'CustomerID', text: 'CustomerID' },
    });
    this.autoCompleteIns?.appendTo(this.inpuEle);
  }

  ngOnInit(): void {
    this.data = purchaseData;
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    this.pageOptions = { pageSizes: true, pageSize: 8 };
    this.daParams = {
      create: this.createCustomerIDFn,
      read: this.readCustomerIDFn,
      destroy: this.destroyCustomerIDFn,
      write: this.writeCustomerIDFn
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Example: Cascading DropDownList editors

Create cascading DropDownLists (e.g., country and state) by configuring a custom editor with appropriate edit methods.

app.component.ts
main.ts
import { cascadeData } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePickerAllModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AutoCompleteModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridModule, IEditCell, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';

@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' textAlign='Right' isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit'
                    [edit]='countryParams' width=150></e-column>
                <e-column field='ShipState' headerText='Ship State' editType= 'dropdownedit' [edit]='stateParams' width=150></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public countryParams?: IEditCell;
    public stateParams?: IEditCell;
    public countryElem?: HTMLElement;
    public countryObj?: DropDownList;
    public stateElem?: HTMLElement;
    public stateObj?: DropDownList | undefined;
    public country: object[] = [
        { countryName: 'United States', countryId: '1' },
        { countryName: 'Australia', countryId: '2' }
    ];
    public state: object[] = [
        { stateName: 'New York', countryId: '1', stateId: '101' },
        { stateName: 'Virginia ', countryId: '1', stateId: '102' },
        { stateName: 'Washington', countryId: '1', stateId: '103' },
        { stateName: 'Queensland', countryId: '2', stateId: '104' },
        { stateName: 'Tasmania ', countryId: '2', stateId: '105' },
        { stateName: 'Victoria', countryId: '2', stateId: '106' }
    ];

    ngOnInit(): void {
        this.data = cascadeData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.countryParams = {
            create: () => {
                this.countryElem = document.createElement('input');
                return this.countryElem;
            },
            read: () => {
                return (this.countryObj as DropDownList).text;
            },
            destroy: () => {
                (this.countryObj as DropDownList).destroy();
            },
            write: () => {
                this.countryObj = new DropDownList({
                    dataSource: new DataManager(this.country),
                    fields: { value: 'countryId', text: 'countryName' },
                    change: () => {
                        (this.stateObj as DropDownList).enabled = true;
                        const tempQuery: Query = new Query().where('countryId', 'equal', (this.countryObj as  DropDownList).value as string);
                        (this.stateObj as DropDownList).query = tempQuery;
                        ((this.stateObj as DropDownList).text as string) = '';                        
                        (this.stateObj as DropDownList).dataBind();
                    },
                    placeholder: 'Select a country',
                    floatLabelType: 'Never'
                });
                this.countryObj.appendTo(this.countryElem);
            }
        };
        this.stateParams = {
            create: () => {
                this.stateElem = document.createElement('input');
                return this.stateElem;
            },
            read: () => {
                return (this.stateObj as DropDownList).text;
            },
            destroy: () => {
                (this.stateObj as DropDownList).destroy();
            },
            write: () => {
                this.stateObj = new DropDownList({
                    dataSource: new DataManager(this.state),
                    fields: { value: 'stateId', text: 'stateName' },
                    enabled: false,
                    placeholder: 'Select a state',
                    floatLabelType: 'Never'
                });
                this.stateObj.appendTo(this.stateElem);
            }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Edit Types in Angular Grid Component

Default cell edit type editors

Customizing the TextBox component for stringedit type

Customizing the NumericTextBox for numericedit type

Restrict decimal input in NumericTextBox while editing

Customizing the DropDownList for dropdownedit type

Provide custom data source for DropDownList component

Enable filtering in DropDownList editor

Customizing the CheckBox for booleanedit type

Customizing the DatePicker for datepickeredit type

Customizing the DateTimePicker for datetimepickeredit type

Restrict minimum selectable date in DatePicker

Accessing editor component instances

Rendering custom cell editors

Render textArea in the edit form

Render AutoComplete in the edit form

Render MaskedTextBox in the edit form

Render DropDownList component in edit form

Render images in the DropDownList editor component using the item template

Render Multiple columns in DropDownList component

Render ComboBox component in edit form

Render TimePicker component in edit form

Render MultiSelect component in edit form

Render RichTextEditor component in edit form

Render Upload component in edit form

Rendering custom cell editors using external functions

Example: AutoComplete as custom editor

Example: Cascading DropDownList editors

How can I help you?

Edit Types in Angular Grid Component

Default cell edit type editors

Customizing the TextBox component for stringedit type

Customizing the NumericTextBox for numericedit type

Restrict decimal input in NumericTextBox while editing

Customizing the DropDownList for dropdownedit type

Provide custom data source for DropDownList component

Enable filtering in DropDownList editor

Open popup on focus in DropDownList

Customizing the CheckBox for booleanedit type

Customizing the DatePicker for datepickeredit type

Customizing the DateTimePicker for datetimepickeredit type

Restrict minimum selectable date in DatePicker

Accessing editor component instances

Rendering custom cell editors

Render textArea in the edit form

Render AutoComplete in the edit form

Render MaskedTextBox in the edit form

Render DropDownList component in edit form

Render images in the DropDownList editor component using the item template

Render Multiple columns in DropDownList component

Render ComboBox component in edit form

Render TimePicker component in edit form

Render MultiSelect component in edit form

Render RichTextEditor component in edit form

Render Upload component in edit form

Rendering custom cell editors using external functions

Example: AutoComplete as custom editor

Example: Cascading DropDownList editors