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

Grid data changed programmatically, not showing changes.

On the "actionComplete" event, i perform some validations on the data before it is submitted, which can alter the data.  this new data is not showing in the UI.

actionComplete: function(args){
 if(args.requestType == "save"){
  args.data = CustomValidation(args.data);     //data gets changed

  $.ajax({save the data});

I tried to put an updateRecord() call in the $.ajax success, but it created an infinite loop.  i tried putting a refreshContent(true) in the $.ajax success, but the data in the grid does not change.

Please let me know if there is a way to update the grid, without reloading the whole page.  If there is a different event i should perform the custom validations on, please let me know.


1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team May 17, 2017 03:46 AM UTC

Hi Duran, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to prevent default saving, you have update the new details using the updateRecord() method of ejGrid control. So, we suggest you to use the actionBegin event of ejGrid control because in actionBegin event, edited value is not updated in Grid. Initially prevent the normal save in Grid then using the updateRecord() method we can save the newly changed from the custom validation method. 

We have prepared a simple sample for prevent the ordinary save and save the changed value from custom validation method. 

For an example we have changed the edited value for EmployeeID column value in the customValidation method and update the record in Grid. 

Refer the below code example. 

<script type="text/javascript"> 
        var flag = true; 
        $(function () { 
            $("# ControlRegion ").ejGrid({ 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData, 
                allowPaging: true, 
                columns: [ 
                actionBegin: "begin" 
        function begin(args) { 
            if (args.requestType == "beginedit") { 
                flag = true; 
            if (args.requestType == "save" && flag == true) { 
                args.cancel = true; //prevent save action 
                flag = false; 
                var gridObj = $("# ControlRegion ").data("ejGrid"); 
                gridObj.cancelEdit();// cancel editing 
                args.data = customValidation(args.data); //call for the custom validation data to change the data 
                url: "/Grid/ApplyPaymentToDeposit", 
                type: "POST", 
                data: args.data, 
                success: function (data) { 
                    $("#ControlRegion").ejGrid("updateRecord", "OrderID", { OrderID: args.data['OrderID'], CustomerID: args.data['CustomerID'], EmployeeID: args.data['EmployeeID'], }); 
//call for the updateRecord method in ajax success 
                error: function (e) { 
                    args.cancel = true; 
        function customValidation(data) { 
            data["EmployeeID"] = 3; 
            return data; //return the employeeID modified data 


Refer the help documentation. 

If we misunderstood your query then please get back to us with the following details. 

  1. Screenshot or video demonstration of the issue.
  2. Share the Grid code example.
  3. If possible share the sample or reproduce the issue in the attached sample.

If we misunderstood your query then please get back to us. 
Thavasianand S.

Live Chat Icon For mobile
Up arrow icon