Kendo React - Grid - Date filter with operator "Is before/Is after" is showing null records

1 Answer 72 Views
DatePicker Filter  Grid
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Jason asked on 20 Dec 2023, 03:34 PM

Greetings,

I'm having an issue with the Date filter when the grid contains null date values.
I'm currently using the following operators for the Date filter:

{ text: 'grid.filterAfterOperator', operator: 'gt' },
{ text: 'grid.filterBeforeOperator', operator: 'lt' },
{ text: 'grid.filterIsNullOperator', operator: 'isnull' },
{ text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }

The "Is null/Is not null" operators are working but the "Is before/Is after" operators are not filtering out the null values.
Is there a way to fix this? Thanks!

Jason

Jason
Top achievements
Rank 2
Iron
Iron
Iron
commented on 20 Dec 2023, 04:06 PM

This issue also happens on numeric filter with the Gte, Gt, Lte, and Lt operators.

1 Answer, 1 is accepted

Sort by
1
Accepted
Konstantin Dikov
Telerik team
answered on 22 Dec 2023, 12:35 PM

Hi Jason,

The null values will be returned only for one of the operators (is after) and the same applies for the numeric value. Please note that this is the default result of comparing dates and numbers with null:

new Date() > null         <-- true
1 > null                         <-- true

With the above in mind, the only option for excluding null values will be to override the default operators and change their logic as shown in the following example:

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Jason
Top achievements
Rank 2
Iron
Iron
Iron
commented on 01 Jan 2024, 05:00 PM

Hi Konstantin,

I was able to override the operators and the filters are working. I've been using local storage to store the filter objects for later use but with the overridden operators, the local storage is unable to save the custom function inside the filter object.

Is there a way around this? Thanks for your help!

Filip
Telerik team
commented on 03 Jan 2024, 02:23 PM

Hi, Jason,

Can you please send us a runnable example that reproduces the issue with local storage not being able to save the custom function? 

This will enable us to debug it locally and provide more feedback.

Regards,
Filip
Jason
Top achievements
Rank 2
Iron
Iron
Iron
commented on 09 Jan 2024, 06:53 PM

Hi Filip,
In the example from above (Line 50-53): https://stackblitz.com/edit/react-b46a4z-h15yvu?file=app%2Fmain.jsx

I added the following for saving the filter object in localStorage. After doing JSON.stringify(event.filter), the custom operator function is gone:

const [filtersetFilter] = React.useState(JSON.parse(localStorage.getItem('filters')) || initialFilter);
  const onFilterChange = (event=> {
    setFilter(event.filter);
    localStorage.setItem(
      'filters',
      JSON.stringify(event.filter)
    );
  };
Konstantin Dikov
Telerik team
commented on 10 Jan 2024, 07:45 AM

Hi Jason,

JSON.stringify does not preserve functions, so you will have to either modify the way that JSON.stringify works or set the custom operator manually after loading the data. Here is a forum thread discussing how you can handle functions with JSON.stringify:

As for manually replacing the custom operator function, you can store it in the localStorage as a string and when you load back the state, replace it with the actual custom operator. 

Tags
DatePicker Filter  Grid
Asked by
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or