Rowdata in CellEdit event shows unupdated values in batch mode.

[Rykunov Alex]

I have a necessity to manually update database with grid records on edit. I plan to use cellSave event of the ejGrid for that. RowData property of the cellSave event gives me the the object I can pass to the server without any additional manipulations. However, there's a problem: on the moment of the event rowData still shows the unupdated values.

So, I would have to create my object from scratch, taking the values from grid directly, and that is not very efficient. Please advise if there's other good ways to do what I want.

[Farveen Sulthana Thameeztheen Basha]

Hi Rykunov, 

Thanks for your interest in syncfusion products. 

When using “cellSave” event on batchEditing, in “args.rowData” edited values are not updated because it doesn’t  get updated  on the datasource. So it shows only the previous value of the data. Once the datasource get updated, in “args.rowData” we can get the updated value. If you want to get the edited values before the datasource get update, you can use “getBatchChanges()” method. By this method you can get added, edited and deleted values of the Grid data. 

 

Please refer to the API reference link to know getBatchChanges method:- 

https://help.syncfusion.com/api/js/ejgrid#methods:getbatchchanges 

While analyzing your query, you need to send the updated records to the server side. By using “batchSave” method, you can get the added, deleted and edited records on the serverside. 

https://help.syncfusion.com/api/js/ejgrid#methods:batchsave 

You can  use the “batchUrl” property of the Grid to get the updated records on the serverside.  

 

 

Please refer to the code example:- 

appComponent.html 

 

<ej-grid #grid  [dataSource]="gridData"[allowPaging]="true [editSettings]= "edit"  [toolbarSettings]= "tool"> 

    <e-columns> 

        <e-column field="OrderID" [isPrimaryKey]="true" isIdentity="true" width="75" textAlign="right"></e-column> 

        <e-column field="EmployeeID" headerText="Employee ID" [validationRules] = "{ required: true, number: true }" width="75" textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="CustomerID" width="80"textAlign="right"></e-column> 

   </e-columns> 

</ej-grid> 

 

appComponent.ts 

export class AppComponent { 

 

           public gridData = ej.DataManager({ 

                url : "Home/DataSource", 

                batchUrl : "Home/BatchUpdate", 

                adaptor : "UrlAdaptor" 

           }); 

} 

Controller side: 

 

public ActionResult BatchUpdate(List<EditableOrder> changed, List<EditableOrder> added, List<EditableOrder> deleted) 

        { 

            if (changed != null) 

                OrderRepository.Update(changed); 

            if (deleted != null) 

                OrderRepository.Delete(deleted); 

            if (added != null) 

                OrderRepository.Add(added); 

            var data = OrderRepository.GetAllRecords(); 

            return Json(data, JsonRequestBehavior.AllowGet); 

        } 

 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Rykunov Alex]

Thank you for your reply.

However, the point of a question was, that I intend to send data to server manually, through my own POST method, and do a little of data transformations clientside. Therefore, I need to get the data from the grid (as soon as it is updated, preferably) and then do the transformations.

I can also point to the fact, that the endEdit event (for the normal edit mode) does have the updated data within itself, that made me thinking, that the current behaviour of the cellSave is not intended.

[Farveen Sulthana Thameeztheen Basha]

Hi Rykunov, 

In the “EndEdit” event of the Grid, the edited values get updated to the dataSource after it gets saved. But in case of “cellSave” event, the edited values doesn’t  get updated  on the datasource. After saved, we can’t  get the edited data on server side. 

If you need to send data to serverside manually, you have to get the edited values in “getBatchChanges” method on “cellSave” event. After collecting the edited values you have to send  data to the serverside manually using AJAX post. 

Please refer to the code example:- 

@(Html.EJ().Grid<object>("Grid") 

            // .Datasource(d => d.Json((IEnumerable<object>)ViewBag.data).URL("/Home/DataSource")) 

       .Datasource((IEnumerable<object>)ViewBag.datasource) 

       .AllowPaging() 

       .ClientSideEvents(eve => 

         { 

             eve.CellSave("cellsave"); 

         }) 

       .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); }) 

        .Columns(col => 

            { 

                //col.Type("checkbox").Width(50).Add(); 

                col.Field("OrderID").IsPrimaryKey(true).Add(); 

                col.Field("CustomerID").HeaderText("CustomerID").TextAlign(TextAlign.Left).Add(); 

                col.Field("ShipCountry").HeaderText("Ship Country").TextAlign(TextAlign.Left).Add(); 

                col.Field("EmployeeID").HeaderText("Employee ID").Add(); 

                

            })  

    ) 

 

<script type="text/javascript"> 

    function cellsave(args) { 

        setTimeout(function (e) {  

            var obj = $("#Grid").ejGrid("instance"); 

            var records = obj.getBatchChanges(); 

            $.ajax({ 

                url: "/Home/Data", 

                type: "POST", 

                datatype: 'json', 

                contentType: "application/json", 

                data: JSON.stringify({ value: records.changed, value1: records.added, value2: records.deleted}), 

                success: function (data) { 

                  alert("Success") 

                }, 

                error: function (xhr) { 

                    debugger 

                    alert('error'); 

                } 

            }); 

        },1) 

    } 

 

</script> 

Serverside:- 

public ActionResult Data(List<EditableOrder> value, List<EditableOrder> value1, List<EditableOrder> value2 ) 

     { 

 

            //return this.Json(new { success = true }, JsonRequestBehavior.AllowGet); 

        return Json(value, JsonRequestBehavior.AllowGet); 

    } 

Please refer to the attached sample:- 

http://www.syncfusion.com/downloads/support/forum/128986/ze/Sample777777023.zip 

Regards, 

Farveen sulthana T