[FlexGrid] How to write your own comparator for FlexGridFilter

[FlexGrid] How to write your own comparator for FlexGridFilter

Posted by: james.ingham on 17 June 2019, 6:14 pm EST

• 

  james.ingham

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 June 2019, 6:14 pm EST - Updated 3 October 2022, 10:55 am EST

  Hi Support,

  We are looking for a way to customize flexGrid filters as shown in the attached chart. Basically we don’t want to strictly compare some date-type data. Is there a way to write our own comparator which redefines “equal”, “greater than” or “less than” logic?

  

  672×530 63.9 KB

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 18 June 2019, 9:23 pm EST

  Hello,

  You may override the apply method of condition filter class and add your own comparison logic. Please refer to the sample below:

  https://stackblitz.com/edit/angular-42ikra

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 19 June 2019, 9:14 am EST

  It looks that link is broken…

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 19 June 2019, 9:02 pm EST

  https://stackblitz.com/edit/angular-42ikra

  Please try this again

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 20 June 2019, 9:39 am EST - Updated 3 October 2022, 10:56 am EST

  Thanks in heaps!

  BTW, is there any way to customise the popup UI as well? We’d like to add some of our own stuff and change its look and feel a little bit. Is it possible?

  

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2019, 9:57 pm EST

  You may easily customize the column filter editor by using the control template property of the ColumnFilterEditor class. Please refer to the sample below:

  https://stackblitz.com/edit/angular-6jbizm

  In the above sample, if you will navigate to filter by condition, you will see that I moved the Apply, Cancel and Clear button to the top of the filter editor.

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 30 June 2019, 8:26 am EST

  Lovely Abhishek! Your sample code is very helpful!

  One final question in this post: Is it possible to programmatically access and apply filters to any columns? e.g. I know I can do following in terms of collective sorting:

  
  sd1 = new wijmo.SortDescription("CountryName", true); // true -> ascending
  sd2 = new wijmo.SortDescription("Province", false);       // false -> descending
  wijmo_data.sortDescriptions.push(sd1);  // first sort by CountryName in ascending order
  wijmo_data.sortDescriptions.push(sd1);  // second sort by Province in descending order
  
  

  I reckon there might be a counterpart version for wijmo filters as well.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 30 June 2019, 4:56 pm EST

  Hello,

  There are a couple of ways by which you can apply a filter in FlexGrid programmatically. You may simply apply filters using the CollectionView’s filter property or to apply advanced filtering, you use the FlexGridFilter class.

  Please refer to the sample below that demonstrates the above behavior:

  https://stackblitz.com/edit/angular-csh2of

  API Reference:
  
  CollectionView’s filter: https://www.grapecity.com/wijmo/api/classes/wijmo.collectionview.html#filter
  
  FlexGridFilter: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html
  
  ConditionFilter: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.conditionfilter.html
  
  ValueFilter: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.valuefilter.html

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 1 July 2019, 9:50 am EST

  Awesome! Really appreciate your support.