Filter

[Umberto Capriglione]

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.

thanks

[Rajapandi Ravi]

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

Regards,

Rajapandi R

[Umberto Capriglione]

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.

[Rajapandi Ravi]

Umberto,

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

Regards,

Rajapandi R