Wijmo FlexGrid Refresh Data and Retain Filters

Wijmo FlexGrid Refresh Data and Retain Filters

Posted by: muhammad.f.mehboob on 9 October 2023, 8:08 am EST

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 October 2023, 8:08 am EST

  Hi Team,

  I am trying to implement a functionality where I want to filter the FlexGrid, make some changes, save the data to backend SQL . After saving the data, I want to refresh the grid with the updated data and retain the selected filter.

  The issue I am having is when I make the API call to get the refreshed data, the filters are not being retained. I did take a look at this demo https://www.grapecity.com/wijmo/demos/Grid/PersistingState/angular but its restoring the filter on button click. I need to do it after grid refresh with API call.

  Also, the updatedLayout and LoadedRows event handlers are not giving the desired results. The events keep getting triggering even after the grid is loaded.

  Appreciate your help!

  Thank you

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 4:49 pm EST

  Hi,

  As per your use case, you need to restore the state of the FlexGrid after assigning the data to the collectionView of the FlexGrid. In case the issue persists then please share a sample replicating your issue. Also, please ensure that you are assigning the fetched data to the sourceCollection property of the CollectionView instead of assigning it to itemsSource.
  
  Please refer to this code snippet:

  async restoreDataFromDB() {
          // Call the API.
          let data = await this.getDataFromAPI();
          // Reset the data in the collectionView.
          this.flexGrid.collectionView.sourceCollection = data;
          // Restore the state of the FlexGrid.
          this.onRestoreClick();
      }

  In the shared sample I have used setTimeout to replicate the delay in fetching the data from the server and have used the localStorage to store the updated data which will be retrieved in an asynchronous call using Promise.

  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/wO8HjKKNekiLrNlCJqMBCg

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 7:20 am EST

  Thank you for the response. I was able to make it work with your recommendation.

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 2:19 pm EST

  Hi,

  I am glad that I was able to help you. In case you have any further queries please let us know.

  Regards
  
  Anirudh