Ability to retain JS based flexgrid filters and sorting after page refresh

Ability to retain JS based flexgrid filters and sorting after page refresh

Posted by: dtghuge on 15 December 2021, 9:45 am EST

• 

  dtghuge

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 December 2021, 9:45 am EST

  Hello,

  We have JS based wijmo grid (flexgrid). We have enabled FlexGridFilter for all the columns of the grid.

  The challenge for us is “how to retain applied filters and sorting after page refresh”.

  I have a save button, on click of save values gets saved into DB, and page gets refreshed. After refresh, we want to retain all applied filters back to the same grid

  On click of save, I’m storing all applied filters into a local variable so I can reapply those filters after page refresh.

  var gObj = GridOS.ComponentUtils.getGridObjectById(gridId);
  var filters = gObj.filter; 
  

  After page load, I’m trying to assign the saved filter back to gObj.filter
  
  but setting the gObj.filter doesn’t filter the rows.

   gObj.filter = filters; 
  

  Do you have any suggestions?
  
  How and where(in which event) to apply filter back to the grid after refresh?

  Thanks,
  
  Dhanraj

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 16 December 2021, 9:00 am EST

  Hello,

  You may save the filterDefinition of the FlexGridFilter before refreshing the page and then assign the filterDefinition back to the FlexGridFilter after refreshing the page. You may refer to the following link below for more information:

  Persisting state Demo: https://www.grapecity.com/wijmo/demos/Grid/PersistingState/purejs

  filterDefinition API link: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html#filterdefinition

  Regards

• 

  dtghuge

  • Post Options:
  • Link
    Copy

  Posted 23 December 2021, 3:37 am EST

  Thank you Sonu,

  Here, the way they had applied filter back to the grid is on click of an explicit button, and it works. however, can we have any grid event/handler which triggers automatically after grid load/refresh completely? So that filter can get applied automatically in that event without any explicit action.

  Just want to highlight one thing -
  
  With the given example, I had to refresh the grid to bind the changes after assigning saved filter back to the filter obj, then only it worked for me.

  theFilter.grid.refresh();
  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 December 2021, 3:03 am EST

  Hello,

  There are a few events of the FlexGrid control which get triggered after the grid load/refresh completely like loadedRows, updatedLayout, updatedView. However, these events also get triggered on different operations on the grid. And as per our understanding, you want to restore the filterDefinition after the page refresh then we would recommend you to use the onload event on the window and restore the filterDefinition. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/js-z596nt?file=index.js

  Regards

• 

  dtghuge

  • Post Options:
  • Link
    Copy

  Posted 28 December 2021, 10:37 am EST

  Thanks Sonu,

  updatedLayout event worked for me!

  As you recommed to use onload, but onload will only get triggered after the page load but not after grid refresh(asynchronously). updatedLayout gets triggered in both cases.

  Thank you!

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 29 December 2021, 12:01 am EST

  Hello,

  We are glad that it worked for you. Thank you for sharing the information with us.

  Regards