How to show Date Range control in the FlexGrid Filter

How to show Date Range control in the FlexGrid Filter

Posted by: info on 11 April 2023, 12:16 am EST

• 

  info

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 April 2023, 12:16 am EST

  We have to show the date range control (ex. wj-input-date-range) in flex grid filter, for the date time type column.

  My requirement is to use wijmo input date range control in flex grid filter, also apply and clear filters on the flex grid.

  Is it possible to use date range control in filter? and how we can use it?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 11 April 2023, 8:14 pm EST

  Hello,

  We apologize but this wouldn’t be possible to implement it on FlexGridFilter. Because FlexGridFilter provides 2 conditional filters which can be used to filter data for most case scenarios, even for your use case.

  As for your use case scenario, it can be achieved using FlexGridFilter. Please follow the following steps:
  
  1.Open ColumnFilterEditor of the date column by clicking on the filter icon
  
  2.Select ‘Filter by condition’
  
  3.Select the first condition as ‘Is After’ and select your first date of the range
  
  4.Select the second condition as ‘Is Before’ and select your second date of the range
  
  5.Click the ‘Apply’ button to apply the filter

  If you still want a filter with InputDateRange control then, you can implement your custom filter and use CollectionView.filters property to add your custom filter function. You can refer to the below links to get more information regarding the same:

  API link: https://www.grapecity.com/wijmo/api/classes/wijmo.collectionview.html#filters

  Demo: https://www.grapecity.com/wijmo/demos/Core/CollectionView/CreatingViews/Filtering/MultipleFilters/purejs

  Hope it helps.

  Regards

• 

  info

  • Post Options:
  • Link
    Copy

  Posted 12 April 2023, 1:36 am EST - Updated 12 April 2023, 1:41 am EST

  Hello,

  Thank you for updates regarding the date range implementation.

  It seems that current implementation has “and” and “or” condition. However, we would like to use “between” condition. Can you provide more details about how can we implement it?

  

  Thank you.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 12 April 2023, 5:32 pm EST

  Hello,

  Sorry, but it wouldn’t be possible. As per our understanding, you want to apply a conditionFilter on a column to filter dates that lie in a specified date range if so then it can be achieved by current FlexGridFilter operators(And/Or). As explained earlier, you need to follow the above-given steps along with And operator to provide a result of dates between the first and second condition’s date values. Then there wouldn’t be a requirement for a Between operator, please let me know if I may have overlooked something.

  If you wish to incorporate your own filter conditions, it is possible to override the default conditionFilter and implement your custom logic. A sample link demonstrating this process is provided below:

  https://stackblitz.com/edit/angular-asynxr?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 20 April 2023, 6:16 pm EST

  Hello,

  I have created a sample on how you can customize FlexGridFilter to add InputDateRange control inputEditor to apply date range Filtering on date-type columns in the grid. Please refer to the link below to see the implementation:

  https://stackblitz.com/edit/angular-5wo3gb?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.ts

  In the above sample link, I have hidden the default comboBox and inputDate editors from the conditionFilter and replaced them with an InputDateRange control which internally set the date range values to filter conditions.

  Hope it helps, in case you have any further queries please let us know.

  Regards