Unable to see refreshed data in grid after ajax call which changes data

[Avinash]

Hi,

I have a asp.net 6 razor page with a ej2 grid which displays data from a database as below

 <ejs-grid id="grid" dataSource="@Model.NewStockRequestViewModel"></ejs-grid>

This displays data correctly. Now on click of a button, I change some data in the database and I want this to reflect in my grid without having to refresh the browser. 

I tried the following but it doesn't work

function refreshGrid() {
            const ajax = new ej.base.Ajax("/api/StockRequests/GetDataForGrid", "GET", true); // call API
            ajax.send();

            ajax.onSuccess = function (data) {
                alert("Success 2");
                console.log(data);
                const grid = document.getElementById("grid")["ej2_instances"][0];
                grid.dataSource = ej.data.DataUtil.parse.parseJson(data).result;
            };
        }

I can see success and also the json data returned by the api as below. However the grid is emptied and does not has zero rows.

Thanks

Avinash Tauro

[Pavithra Subramaniyam]

Hi Avinash,

Thanks for contacting Syncfusion support.

From your code, we suspect that the “data” doesn’t contain any “result” value which is set as grid dataSource. So we suggest ensuring whether the data contains the “result” with proper values. Or just set the parsed “data” to the Grid dataSource as given in the below code example.

ajax.onSuccess = function (data) {

  const grid = document.getElementById('Grid')['ej2_instances'][0];

  grid.dataSource = ej.data.DataUtil.parse.parseJson(data);

};

 

If you are still facing the issue, please share the below details which will be helpful for us to provide a better solution as early as possible.

1. Share the screenshot of the “grid.dataSource” value in the console
2. Is there any script error?
3. Try to bind the “actionFailure” event and share the argument if this event triggered
4. Share the screenshot of the Grid component

Regards,

Pavithra S