Updating grid data using ajax does not refesh grid UI correctly

My requirement -> Update city for multiple users

1. I have a grid with ViewModel, Id, Name, Age, City.

2. It has default add/edit/delete functionality enabled which is working correctly

3. I also added a context menu for Cities.

4. When I Select multiple records on the grid and Right click, it displays context menu with list of Cities

5. I select a city

6. I want the city to be updated for all selected records


I have coded this as follows

1. On click of a city, I call a page handler using ajax and pass the cityId and collection of selected userIds

2. In the page handler, I update the city value for records matching userIds


Problem

1. The grid is not refeshed.

2. If I reload the page on success of ajax call using window.location.reload(); it shows the updated data in grid

=> BUT, I lose all grid state, like pagenumber, filters, row selections, etc.

Note: When I use the default edit functionality of grid, it correctly updates the viewmodel as well as refeshes the UI and remembers the grid state.

How do I implement this in my javascript after the ajax call?

Thanks
Avinash T.


1 Reply

VS Vikram Sundararajan Syncfusion Team June 19, 2023 01:55 PM UTC

Hi Avinash,


Greetings from Syncfusion support,


From your query we could see that after rendering the Grid, you are changing some records and like to update the changes in the UI. You can achieve your requirement by invoking the freezeRefresh() , please refer the below code example for more information.


 

grid.freezeRefresh();

 


If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S


Loader.
Up arrow icon