We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Update db records using Popup Model

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.



3 Replies 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team November 6, 2022 11:36 PM

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 InsertUrlRemoveUrlUpdateUrlCrudUrl 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.


Marked as answer

TH Thanuja replied to Rajapandiyan Settu November 7, 2022 02:41 AM

Thank you @ Rajapandiyan Settu.



RS Rajapandiyan Settu Syncfusion Team November 7, 2022 10:10 PM

Hi Thanuja,


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


Regards,

Rajapandiyan S


Loader.
Live Chat Icon For mobile
Up arrow icon