dx-react-grid filter option 'equal' not working

Question

I have created a table with dx React Grid and in one of the columns, the data is being shown as colored empty blocks with the help of DataProvider,with each color corresponding to a number out of 1, 2, 3, 4 or 5.

Here is my Grid implementation snippet:

<Grid rows={rows} columns={columns}>
    <FilteringState />
    <SearchState />
    <RatingHeatmapProvider for={skillColumns}  />
    <IntegratedFiltering />
    //....
    <Table />
    <TableHeaderRow />
    <Toolbar />
    <SearchPanel />
    <TableFilterRow showFilterSelector iconComponent={FilterIcon} />
    //....
</Grid>

Other than filter options ['equal', 'notEqual'], every other option such as greaterThan, contains etc works. All options in other columns that have text value displayed works.

In image below, the first 4 columns correspond to the one with colored blocks on display, the last column is another one with text values directly on display. As you can see, filter = 3 should have shown me the green tile, it has not. Even greaterThanOrEqual or lessThanOrEqual works (not shown in image)

How do I fix this?

[EDIT]: Note: As I just checked, even without DataProvider and banded columns, i.e. showing the numbers directly this issue is present.

Sergey Sergey · Accepted Answer · 2019-02-14T11:04:54

I suppose you store 'Rating' as 'number' in your database, don't you? When Grid processes the 'equal'/'notEqual' filtering operations, it compares value from a filter editor(string) and value from a row(number). It causes the described problem. This issue has been already fixed. The fix will be available in the next update.

Currently, you can use a custom predicate as a workaround:

filteringColumnExtensions: [
  {
    columnName: "comumn_name",
    predicate: (value, filter) => {
      if (filter.operation === "equal") {
        return String(value) === filter.value;
      }
      // process other filter operations here...
    }
  }
]

Demo.

dx-react-grid filter option 'equal' not working

1 Answers