Multi-value filtering a column

[ghost]

Not sure if this is already possible but if so I cannot figure out how to do it (other than writing a custom filtering function) but if I want to specify multiple values for filtering a column so for example, if I want to filter a Status column by rows that are either done or closed. I would expect something like this to work but it does not:

const filters = [{ columnName: 'status', value: 'done' }, { columnName: 'status', value: 'closed'}]

Alternatively and perhaps more intuitively would be to pass a list of filtering values e.g:

const filters = [{ columnName: 'status', value: ['done', 'closed'] }]

Additionally but related would be the option to specify simple arithmetics (although this could be done in a custom filtering function), i.e.

const filters = [{ columnName: 'status', value: (x) => return x > 3 }]

The last thing is more advanced and not as important, but being able to filter a column by multiple values should be implemented into the API in my opinion and should not require a custom filtering function

[kvet]

Hi,   Thank you for your suggestion.   Currently, we suppose that only one filter can be applied to the column. But the filter can be complex. So, in order to archive the desired behavior, you need to provide a custom filtering function and a custom filter editor.

[ghost]

Okay thanks for the reply.

I looked at your custom filtering example found here: https://github.com/DevExpress/devextreme-reactive/blob/v1.0.0-alpha.9/packages/dx-react-demos/src/bootstrap3/filtering/custom-filter-row.jsx

but I feel it's a very specific example and hard to abstract simpler filtering from. Any chance you could provide an example of a custom filtering function for just allowing multiple values in a column?

Something like this (this snippet requires ES6):

    if (filter.columnName === 'myColumn') {
      if(filter.value == 'multiple') {
       return [val1, val2, val3].includes(row[filter.columnName])
      }
    }

[jaydreyer]

Is there an example of a complex filter? I have the same need as @terndrup . I'd like to have a select field with the multiple property to filter by a set of status codes. I can't get even the basic text input filter to handle anything other than one value. I tried using & && | || AND OR but none worked. Not sure if this is what is meant by a complex filter or not.

[ghost]

I ended up doing it manually using the ES6 .include function to check if the value is part of an array. Im guessing you could do the same and passing it an array of your status codes:

 if (filter.columnName === 'Status') {
        if (filter.value === 6) {
          return [200, 201, 204, 500, 525].includes(row[filter.columnName]);
        }

[deranjer]

Sorry, new to react and js in general, and trying to do a multi filter based on value, not sure how to implement your solution.
Currently I have the following setup for filteringState:

<FilteringState filters={this.props.filter} />

The filter is actually set by a separate component (a toolbar on the left side to set filtering) and I pass that from redux to setup the filtering. I want the filter.value of "Downloading" and "Uploading". I was trying the following:

componentWillReceiveProps (nextProps){
        if (this.props.filter != nextProps.filter){
            this.filterHandler(nextProps.filter)
        }
    }

filterHandler = (filter) => {
        console.log("Changing FIlter", filter)
        console.log("Filter Value", filter[0].value)
        if (filter[0].value === 'Active') {
            console.log("Active Filter")
            values = ['Seeding', 'Downloading'].includes
            this.props.filter == [{columnName: 'Status', value: values}]
            return['Downloading', 'Seeding'].includes(row[filter.columnName]);
        }
    }

but obviously that doesn't work... any suggestions?

[kvet]

Hi @deranjer,   Are you using use the LocalFiltering plugin?   If so, please, refer to the following guide: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/filtering/#using-custom-filtering-algorithms   Otherwise, if you are passing filtered rows to the Grid's rows property, you should figure out how to perform filtering in your case correctly. And because this question is not related to DevExtreme Reactive, we suggest you ask this question in StackOverflow, for example.   Please also refer to the following guide. It describes the purpose of state management, data processing, and UI plugins. Here is it: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/plugin-overview/

[gwmaster]

can you show simple example of multiple filter on same column like https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/

[SergeyAlexeev]

Hi,

Currently, React Grid doesn't support the header filter functionality. It only provides the table filter row. So, we don't have the example you mentioned. As we stated above, you can apply multiple filters to a column using a custom filter function and a custom filter editor. Please refer to this guide for more details.

[gwmaster]

i try <FilteringState defaultFilters={[ {columnName : 'mark', operation: 'equal', value: 0}, {columnName : 'mark', operation: 'equal', value: 1} ]} />

but its dont work do you have sample how its will work?

[SergeyAlexeev]

Hi,

As far as I understand you are trying to implement a multiple filter. If so, please refer to the comment above.

We also discussed how to create a multiple filter in context of this issue.

[gwmaster]

the link from comment

https://github.com/DevExpress/devextreme-reactive/blob/v1.0.0-alpha.9/packages/dx-react-demos/src/bootstrap3/filtering/custom-filter-row.jsx

no work as "LocalFiltering" not includes in "@devexpress/dx-react-grid": "^1.7.0",

[MaximKudriavtsev]

@gwmaster It's our old BC LocalFiltering => IntegratedFiltering

[gwmaster]

perfect thank you. i build some basic sample using hooks if some one need sample

setFilter('count',[1,20,100]) updateFilters([['count',[]] , ['name' , ['Linda','Lisa','Paul']]]);

//clear all setFilters([]);