We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon


Good morning,

i would like to understand how to add a filter on a column that alredy have a filter.

I'm trying to achive the some results as in menu "between" two date so i use the method filterByColumn two times but the second call overwrite the first call.


3 Replies

RR Rajapandi Ravi Syncfusion Team December 5, 2022 11:25 AM UTC

Hi Umberto,

Greetings from Syncfusion support

Based on your query we could see that you like to filter the date column values by using date range. The date range picker can be used in the Grid Menu filtering to filter the date ranges by rendering it as a custom component in the menu filter. In the date range picker’s change event, the start and end date values are stored in a global variable and using the Grid’s filterByColumn the start date value is filtered with ‘greaterthan’ operator on the date column. Then in the Grid’s actionBegin event handler, an additional ‘lessthan’ filter for the date column is pushed to the column property(returned in event arguments) with the end date value. A flag variable is enabled in the date range picker’s change event to identify this case here.

This is explained below KB, Please refer the below KB for more information.

KB: https://www.syncfusion.com/kb/12390/how-to-filter-custom-date-ranges-in-grid-column-using-date-range-picker

Documentation: https://ej2.syncfusion.com/react/documentation/grid/filtering/filter-menu/#custom-component-in-filter-menu


Rajapandi R

UC Umberto Capriglione December 5, 2022 11:59 AM UTC

Hi  Rajapandi Ravi,

thank's for your answer.

I don't need to implement date picker because i must call the filter from a custom component.

I saw your solution, but seems to be a work-around not a solution, for instance, in case of 10 column with date i must set 10 global variable, loosing encapsulation of variable.

In my hopinion it's better if you implement an api where i can pass the 'beetween' predicate and two values.

I hope you will consider that for the future release.

thanks Umberto.

RR Rajapandi Ravi Syncfusion Team December 6, 2022 01:04 PM UTC


If you like to filter the between dates without using datepicker, we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.


clickHandler() { //click event

   this.grid.filterSettings.columns = [

    {field: 'OrderDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: new Date('07/04/1996')},

    {field: 'OrderDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: new Date('07/09/1996')}]



Sample: https://stackblitz.com/edit/react-v94tiu-xctz7j?file=index.js,data.js


Rajapandi R

Live Chat Icon For mobile
Up arrow icon