Customize the Edit Dialog
17 Feb 20223 minutes to read
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.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
<e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
ej.base.L10n.load({
'en-US': {
'grid': {
'SaveButton': 'Submit',
'CancelButton': 'Discard'
}
}
});
function actionComplete(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
var dialog = args.dialog;
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';
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}