Search results

Customize the Edit Dialog in ASP.NET MVC Grid control

15 Oct 2021 / 1 minute 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.

razor
dialog.cs
Copied to clipboard
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        @Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col =>
   {
       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
       col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
       col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
   }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
    </div>
   
    <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>
}
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}