How to show Date Range control in the FlexGrid Filter

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

    • Post Options:
    • Link

    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?

  • Posted 11 April 2023, 8:14 pm EST


    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:


    Hope it helps.


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


    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.

  • Posted 12 April 2023, 5:32 pm EST


    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:


  • Posted 20 April 2023, 6:16 pm EST


    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:,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.


  • Posted 10 November 2023, 6:58 am EST - Updated 11 November 2023, 2:52 am EST


    Thank you for the great example.

    I implemented it and it works, but for me it shows both old condition filter UI elements and new ones, check attached screen shot.

    Could you please help.

    Thank you.

  • Posted 12 November 2023, 8:56 pm EST

    Hi Ahmad,

    This might be possible if the CSS for hiding the default conditional editors is not applied. Please use the below CSS to ensure that the default editors are hidden:

    .default-cnd {
      visibility: hidden !important;
      display: table-column;

    Also, note that the div with “default-cnd” as its class wraps the default editors shown in the Conditional filter.

    Regarding making the selection of ranges based on the month, you can use the “predefinedRanges” property of the InputDateRange control. Using this you can define predefined ranges in the InputDateRange control.

    Please refer to this sample for reference:


  • Posted 13 November 2023, 7:02 pm EST

    Thank you for your response.

    I tried the css thing but it did not work, but I tried to add hidden attribute to the div in the html and it worked, like this:

    <div class="default-cnd" hidden disabled> 

    The above line is part of the string in the typescript file.

    In your sample code, you don’t have anything in the .css file and it still hides the old control, I don’t know what’s the difference, but anyhow since it worked I can’t complain (I’m pretty new to front end development).

    About my other question that I mentioned in the ticket, I already used predefinedRanges as shown in the screenshot I provided, I was talking about having this functionality in the value filter, like it is in excel, I mean that wijmo automatically groups dates in the value filter by year/month without any coding required.

  • Posted 16 November 2023, 2:49 pm EST

    Hi Ahmad,

    The code to hide the default conditional editors is included in the file “styles.css”. As mentioned in the previous response please use the below CSS to hide the default editors:

    .default-cnd {
      visibility: hidden !important;
      display: table-column;

    Regarding providing the multilevel grouping functionality in value filter, I am currently investigating the feasibility of this feature. This is not an in-built feature in the value filter and requires custom implementation. I also need to make sure that this implementation works well with all other features of FlexGridFilter and FlexGrid. This will take some time. Thanks for your patience and understanding.


  • Posted 20 November 2023, 2:35 pm EST

    Hi Ahmad,

    Since, you have already created a ticket for this case, so I will continue the further conversation regarding this case on that ticket. I will post the final conclusion here as well so that users with similar use case can refer to it.

    This is done to avoid the duplicacy of responses on both the cases. Thank you for your understanding.


Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels