Flexgrid filter using Value Filter Property

Flexgrid filter using Value Filter Property

Posted by: nagalakshminarayan.chittajallu on 26 September 2018, 5:46 pm EST

• 

  nagalakshminarayan.chittajallu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 September 2018, 5:46 pm EST

  Hello,

  I have implemented a grid which has the capability to do server side filtering and pagination using the flexgrid filter.

  Example: The grid shows 10 rows Out of 30 records and when the users clicks on the next page button he will be served with the next 10 rows of data from the server. But the header filter column dropdown will have all the distinct values of the 30 records, which is done by using the Value Filter property of the flexgrid filter.

  The grid and the filters works perfectly fine when I push small data to Value filter property but the browser is not responding when I push large data of around 60,000 - 100,000 distinct values to the header column filters.

  Is there a way I can push the limited data to the value filter property and when we reach the end of the scroll we push the new data. Along with functionality of searching (type-ahead) working?

• 

  nagalakshminarayan.chittajallu

  • Post Options:
  • Link
    Copy

  Posted 26 September 2018, 6:13 pm EST

  I meant to say Unique Values property of the Value Filter Class.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 September 2018, 8:38 am EST

  Hi,

  FlexGridFilter doesn’t support virtualization out of the box, however, you may handle filterChanging and filterChanged event to implement the required functionality.
  
  Please refer to the following sample for the same:
  
  https://codesandbox.io/s/94xp714kqp

  Further, we have also added an enhancement request for the same with internal tracking id 345084. We will let you know about any updates on this.

  Regards
  
  Sharad

• 

  nagalakshminarayan.chittajallu

  • Post Options:
  • Link
    Copy

  Posted 27 September 2018, 12:37 pm EST

  Thanks for providing the code snippet.

  But is there anyway that I can implement this with the angular 2 Gird, because I don’t find the activeEditor on the FlexGridFilter when I import it(wjcGridFilter.FlexGridFilter). We are using the wijmo version of 5.20173.409.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 2:50 am EST

  The activeEditor property was introduced from version 5.2018x.xxx.
  
  Please upgrade to the latest version. You may download the latest version of Wijmo from the npm.
  
  Please refer to the attached sample for a workaround for version 5.20173.409.

  ~Sharad
  
  filter-virtualization-v5.20173.409.zip

• 

  nagalakshminarayan.chittajallu

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 6:08 pm EST

  Hello Sharad,

  Thanks for providing the workaround for version 5.20173.409.

  For some reasons and dependencies we haven’t updated the wijmo version. So, I have tried the approach that you have provided in the sample. It worked as expected.

  The only problem I was facing was with typeahead search field, it filters data based on the list that was loaded(the first 100 items). If we scroll till 150 items the filter uses 150 items data as source and filters on top of it. But I was expecting to search on the entire data.

  Can I have a solution for this. And also is this also fixed in the new versions.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 1 October 2018, 2:38 am EST

  Please refer to the attached updated sample which includes the fix for the issue.

  And also is this also fixed in the new versions
  
  <<<<<<<<<<<
  
  The issue was related to the virtualization implementation and hence it is not expected in the control in either of the versions.

  ~Sharad
  
  wijmo-virtualization-v5.20173.409-updated.zip