You can customize the appearance of the edit dialog in the actionComplete event based on requestType as beginEdit or add.
In the following example, the dialog’s properties like header text, showCloseIcon, height have been changed while editing and adding the records.
Also the locale text for the Save and Cancel buttons has been changed by overriding the default locale strings.
You can refer the Grid Default text list for more localization.
import { L10n } from '@syncfusion/ej2-base';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';
L10n.load({
'en-US': {
grid: {
'SaveButton': 'Submit',
'CancelButton': 'Discard'
}
}
});
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'
(actionComplete)="actionComplete($event)" 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='Freight' headerText='Freight' textAlign= 'Right'
editType= 'numericedit' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public editSettings: EditSettingsModel;
public toolbar: ToolbarItems[];
ngOnInit(): void {
this.data = data;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
}
actionComplete(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
const dialog = args.dialog;
const CustomerID = 'CustomerID';
dialog.showCloseIcon = false;
dialog.height = 400;
// change the header of the dialog
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
}
}
}import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, EditService, ToolbarService, SortService, PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
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';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule,
DatePickerAllModule,
FormsModule,
TimePickerModule,
FormsModule,
TextBoxModule,
MultiSelectModule,
AutoCompleteModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [EditService, ToolbarService, SortService, PageService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);