Reload grid data source

Hi,

I have following situation:
- a grid for which the datasource is set like:
this.grid.dataSource =
new DataManager(
{
adaptor: new RemoteSaveAdaptor(),
url: api.hostBase + '/costcenter',
insertUrl: api.hostBase + '/insert/costcenter',
removeUrl: api.hostBase + '/delete/costcenter',
updateUrl: api.hostBase + '/update/costcenter',
json: body.data,
headers: [{ 'x-access-token': api.getToken() }],
});

- I am editing with Dialog mode

After editing (with add / save / edit) I need to reload the data for the grid (there are some changes on the server that should be reflected on all the rows).
How can I achieve this?




5 Replies 1 reply marked as answer

TS Thiyagu Subramani Syncfusion Team December 16, 2020 01:05 AM UTC

Hi Walter, 

Thanks for contacting Syncfusion support. 

By default in EJ2 Grid when we perform editing operation we modify the changes in server and the modified data will be reflected for that required row only.  

For example please refer to the below screenshot for more reference. 

 


 


Its modified value reflected in required row only in client side like below. 

 


But in your shared information you mentioned that it should be reflected on all the rows. In this we are unclear about your exact requirement. So, before we proceeding this please share below details then only we provide the appropriate solution as soon as possible. 

1 . Do you want to reflect the modified data for all customerID column or any specific row ? 

2.  Explain your requirement briefly with UI representation. 

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

Regards, 
Thiyagu S. 



WK Walter Konnerth December 16, 2020 05:56 AM UTC

Hi,

The requirement is to update all rows since the data is changed on the server (in our case it's a column of boolean type which is set TRUE on the server only for one record and therefore we need to refresh the data to reflect the changes). 

Isn't there a way to refresh the data on the grid on the save response?

Thanks,


TS Thiyagu Subramani Syncfusion Team December 18, 2020 03:52 AM UTC

Hi Walter, 

Thanks for your update. 

Based on your shared information we suspect that you want to update the modified data in server side to all rows. So, we have achieved your requirement using setRowData method in actionComplete event when args.requestType as save.  In this below code we have passed required row’s primary key value and modified data to the setRowData method and using this we have updated all rows value in Grid. 

Please refer to the below code and screenshot. 

function actionComplete(args) { 
        var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        if (args.requestType === 'save' && args.action === 'edit') { 
            for (var i = 0; i < gridObj.dataSource.dataSource.json.length; i++) { 
                var row = gridObj.getRowByIndex(i) 
                var rowInfo = gridObj.getRowInfo(row); 
                rowInfo.rowData.CustomerID = args.data.CustomerID;          // Modified data applied to the all rows  
                gridObj.setRowData(rowInfo.rowData[gridObj.getPrimaryKeyFieldNames()[0]], rowInfo.rowData);     
            } 
        } 
    } 

When updating freight column value in grid, 

 

When updating required CustomerID column value as modified to true in server side. 

 


Updated CustomerID value as true in all rows. 

 


If still misunderstood your requirement, please share your exact requirement with video demonstration briefly. 

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

Regards, 
Thiyagu S 



Marked as answer

WK Walter Konnerth December 28, 2020 09:06 PM UTC

Thanks, this did the trick!


TS Thiyagu Subramani Syncfusion Team December 29, 2020 05:40 AM UTC

Hi Walter, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

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

Regards, 
Thiyagu S 


Loader.
Up arrow icon