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.
Unfortunately, activation email could not send to your email. Please try again.

Rowdata in CellEdit event shows unupdated values in batch mode.

Thread ID:

Created:

Updated:

Platform:

Replies:

128986 Feb 20,2017 06:47 AM Feb 27,2017 07:43 AM Angular 3
loading
Tags: ejGrid
Rykunov Alex
Asked On February 20, 2017 06:47 AM

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 [Syncfusion]
Replied On February 21, 2017 07:42 AM

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:- 




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. 




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
Replied On February 25, 2017 05:18 AM

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 [Syncfusion]
Replied On February 27, 2017 07:43 AM

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:- 



Regards, 

Farveen sulthana T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;