Update db records using Popup Model

[Thanuja]

Dear team,

I'm attempting to update a record in my database using the popup window shown below.

<div>

 @Html.EJS().Grid("Grid").ActionComplete("onActionComplete").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).ActionBegin("actionBegin").AllowExcelExport().ActionComplete("actionComplete").ToolbarClick("toolbarClick").Columns(col =>

                                    {

                                    col.Field("ReceivingNumber").HeaderText("Receiving Number").Width("20").Add();

                                    col.Field("InvoiceNumber").HeaderText("Invoice Number").Width("20").ValidationRules(new { required = true, minLength = 3 }).Add();

                                    col.Field("InvoiceDate").HeaderText("Invoice Date").Width("20").Add();

                                    col.Field("InvoiceAmount").HeaderText("Invoice Amount").Width("20").Add();

                                    col.Field("POStatus").HeaderText("PO Status").Width("20").Add();

                                    col.Field("VendorCode").HeaderText("Vendor Code").Width("20").Add();

                                    col.Field("IsDeleted").HeaderText("IsDeleted").Width("20").Add();

                                    }).Created("created").RowDataBound("rowBound").AllowPaging(true).RowHeight(42).AllowSorting(true).AllowFiltering(true).AllowGrouping(true).PageSettings(page => page.PageSize(10)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "ExcelExport", "Edit", "Update", "Cancel", "Search" }).Render()

 </div>

Records must be updated after submission. But I am unable to find the backend method and grid events for this task.

Thank you.

[Rajapandiyan Settu]

Hi Thanuja,

Thanks for contacting Syncfusion support.

You can use the UrlAdaptor of DataManager when binding data source from remote data. In the initial load of grid, data are fetched from remote data and bound to the grid using url property of DataManager. You can map The CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl, CrudUrl and BatchUrl. Kindly refer to the below documentation for more information.

Persisting data in server: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/persisting-data-in-server#using-url-adaptor

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_URLAdaptor_CRUD-638886966.zip

By setting Edit mode as Dialog, you can Edit/ Add a record through popup.

Dialog Edit: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/dialog-editing

 

[index.cshtml]

@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col =>

{

   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).Add();

   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();

   col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").Add();

   col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();

 

}).AllowPaging().AllowExcelExport().ToolbarClick("toolbarClick").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ExcelExport", "CsvExport" }).Render()

 

 

[HomeController.cs]

        public ActionResult Update(CRUDModel<OrdersDetails> myObject)  // perform update operation

        {

            var ord = myObject;

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.GetType().GetProperty(myObject.KeyColumn).GetValue(or).ToString() == myObject.Key.ToString()).FirstOrDefault();

 

            if (val != null)

            {

                val.OrderID = ord.Value.OrderID;

                val.EmployeeID = ord.Value.EmployeeID;

                val.ShipCountry = ord.Value.ShipCountry;

                val.CustomerID = ord.Value.CustomerID;

                val.Freight = ord.Value.Freight;

                val.OrderDate = ord.Value.OrderDate;

                val.ShipCity = ord.Value.ShipCity;

                val.ShipAddress = ord.Value.ShipAddress;

                val.ShippedDate = ord.Value.ShippedDate;

            }

            return Json(ord.Value);

 

        }

        public ActionResult Insert(OrdersDetails value)  // perform add operation

        {

            var ord = value;

            OrdersDetails.GetAllRecords().Insert(0, ord);

            return Json(value, JsonRequestBehavior.AllowGet);

        }

        public ActionResult Remove(CRUDModel<OrdersDetails> value)  // perform delete operation

        {

 

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault());

            return Json(value);

        }

Note:
In EJ2 Grid, all the CRUD actions are performed based on the primaryKey field. So, it must contain the unique values in the dataSource. If the primayKey field contains duplicate values, then CRUD operations will not work as expected.

Edit: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit

Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Thanuja]

Thank you @ Rajapandiyan Settu.

[Rajapandiyan Settu]

Hi Thanuja,

You’re welcome. Please get back to us if you need further assistance.

Regards,

Rajapandiyan S