Print Page - [Solved]any way to override the filter match so it applies to the rendered cell?

Title: [Solved]any way to override the filter match so it applies to the rendered cell?
Post by: chrwei on September 13, 2019, 01:12:23 PM

I have formatted date cell in a DataGrid, and the filter is applying as a string match on the date object in my data instead of the formatted output.

example: data has 2019-04-10T00:00:00.000Z, cell show 4/10/2019. a search for 4/10 has no results, but 4-10 does.

Title: Re: any way to override the filter match so it applies to the rendered cell?
Post by: jarry on September 14, 2019, 12:43:08 AM

The simplest way is to convert the date to formatted string before loading to the DataGrid. Another way to solve this issue is to extend a date operator and apply it to the column.

Code:

const extOperators = Object.assign(filterOperators, {
  dcontains: {
    text: 'DateContains',
    isMatch: function (source, value) {
      source = String(source);
      value = String(value);
      ...
      //return source.toLowerCase().indexOf(value.toLowerCase()) >= 0;
    }
  }
})

Code:

<GridColumn field="date" title="Date" defaultFilterOperator="dcontains"
/>

Title: Re: any way to override the filter match so it applies to the rendered cell?
Post by: chrwei on September 16, 2019, 07:58:06 AM

what does extOperators get assigned to? this is the part that's not clear to me, how do I get those operators into the scope of the grid and column? docs are completely missing on this.

Title: Re: any way to override the filter match so it applies to the rendered cell?
Post by: jarry on September 16, 2019, 06:45:31 PM

Set the DataGrid component with 'filterOperators' property set to this 'extOperators'. The DataGrid component has all the properties that are extended from ListBase component.

Title: Re: any way to override the filter match so it applies to the rendered cell?
Post by: chrwei on September 19, 2019, 12:08:47 PM

after some guessing, the scope clue I was looking for is: import { filterOperators } from 'rc-easyui'
it was not clear that this was something that could be imported.

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on September 13, 2019, 01:12:23 PM