Reload grid data source

[Walter Konnerth]

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?

[Thiyagu Subramani]

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. 

[Walter Konnerth]

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,

[Thiyagu Subramani]

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 

[Walter Konnerth]

Thanks, this did the trick!

[Thiyagu Subramani]

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