RemoteSaveAdaptor stops working after DataGrid dataSource is changed

Question

Hi,I am using EJ2 ASP.Net Core Razor page.I have a page which implements CRUD for Employees using DataGrid. I can add/edit/delete employee records successfully.I also have a mutiselect above my grid which displays Departments. When user selects one or more departments, the grid datasource is changed in the change event as in the code snippet at the bottom of this post. This works fine too.However once the dataSource is changed => gridObj.dataSource = data; the CRUD operations on the grid no longer work. When I add an employee, it shows the record added in the grid, but it does not call the handler in the mode, where i have the database save code. And when i refresh the page, the new record is gone.function multiselectDepartment_change(args) {        var deptIds = args.value.toString();        $.ajax({            url: '/Employee?handler=LoadData',            method: 'GET',            data: { "departmentIdsCsv": deptIds },            success: function (data) {                var gridObj = document.getElementById('Grid').ej2_instances[0]; //EJ2 Grid instances                 if (gridObj) {                    gridObj.dataSource = data;                }                else                    swal("Error find Grid!", "Data not loaded!", "error");            }        });    }ThanksAvinash Tauro

Balaji Sekar · Accepted Answer

Hi Avinash, 
 
We have analyzed your query with provided the information and we found that cause of the problem as bind Grid dataSource from change event of multiselect dropdown. Grid is consider the dataSource as local instead of RemoteSaveAdaptor. In below code example, we have bind the grid dataSource as grid.dataSource.dataSource.json instead of grid.dataSource property. please refer the below code example and sample for more information. 




[Employee.cshtml] 
   function multiselectDepartment_change(args) { 
        var deptIds = args.value.toString(); 
 
        $.ajax({ 
            url: '/Employee?handler=LoadData', 
            method: 'GET', 
            data: { "departmentIdsCsv": deptIds }, 
            success: function (data) { 
 
                var gridObj = document.getElementById('Grid').ej2_instances[0]; //EJ2 Grid instances  
 
                if (gridObj) { 
                    grid.dataSource.dataSource.json = data; 
                    grid.refreshColumns() 
                } 
                else 
                    swal("Error find Grid!", "Data not loaded!", "error"); 
            } 
        }); 
    } 
 
Now, you can perform CRUD actions after multiselect dropdown bind a data in Syncfusion Grid. 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar

Balaji Sekar · Answer

Hi Avinash, 
 
Greetings from the Syncfusion support. 
 
Before proceeding further, we need to clarify that you used CRUD operation with normal edit or batch edit mode such as row or cell basis and please share the insert action code definition of Grid, that will help to further validate it. 
 
Regards, 
Balaji Sekar

Avinash · Answer

Hi,I am using normal edit. Please find below the grid markup and the named handler code in my razor page. I have also attached the sample project.

------------------------------------------------------------------------------------------- public JsonResult OnPostInsert([FromBody] CRUDModel crudModel) { var newEmployee = crudModel.Value; _db.Employee.Add(newEmployee); _db.SaveChanges(); return new JsonResult(newEmployee); }ThanksAvinash Tauro

Balaji Sekar · Answer

Hi Avinash, Greeting from Syncfusion. We have validated the provided information and checked with our end but we are not able to reproduce the reported problem at our sample. We have created a sample in ASP.Net core with Razor pages and used remoteSaveAdaptor and perform CRUD operation in Grid

. . . .

public JsonResult OnPostDataSource([FromBody]Data dm) { var data = OrdersDetails.GetAllRecords(); int count = data.Cast().Count(); return dm.requiresCounts ? new JsonResult(new { result = data.Skip(dm.skip).Take(dm.take), count = count }) : new JsonResult(data); } public JsonResult OnPostInsert([FromBody]CRUDModel value) { OrdersDetails.GetAllRecords().Insert(0, value.value); return new JsonResult(value.value); } Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Razorpages-remotesave1582488651 If you still face the problem then share more details or below information it will helpful for us to provide a better solution as soon as possible. Share response (network tab) details while perform update operation in Grid. Did you faced reported problem only when update the record in Grid? Share grid package version for further analysis or share the sample (if possible). Regards, Balaji Sekar

Avinash · Answer

Hi,The sample you shared does not have a multi select which filters the grid datasource using Ajax.Please find the my attached sample code in Employee.cshtml.ThanksAvinash TauroAttachment: DeptEmployees_45efe42.zip

Avinash · Answer

Thanks works great

Balaji Sekar · Answer

Hi Avinash, 
  
We glad that your issue has been fixed.  
  
Please get back to us if you require further other assistance from us. 
  
Regards, 
Balaji Sekar.