Rank 1
Hi,
I tried to use the firstFilterProps and the secondFilterProps to get the custom date range. I followed this example:
https://stackblitz.com/edit/react-ma6dmb?file=app%2FcustomFilterUI.jsx
But there is a bug.
firstFilterProps and secondFilterProps can switch places.
Please take a look at the steps I took:
1. I only selected the second filter and then hit the "FILTER" button
2. I reopened the date range filter but the second field is now empty and the value went into the first field
What I saw is that the firstFilterProps can sometimes switch places with the secondFilterProps and that depended on the array itself. So if an array of filters had only a single element it would automatically assume it as the firstFilterProps even if that is not always the case. It would be great if somehow before this it could check and match the same keys firstFilterProps === firstFilterProps, secondFilterProps === secondFilterProps before automatically putting it based on the array length.
1 Answer, 1 is accepted
Hello Bogdan,
Thank you for reaching out to us.
Due to the way that the filtering is implemented and the way that the filter expressions for a field are passed to the column menu, if only the second filter is applied, it will move as first filter expression in the props, because the filter array will contain only one filter.
One way of handling the scenario would be to check the "firstFilterProps.operator" value and based on it, populate the value in the correct filter component. Since you have two different operators for the two filter components, you can determine for which of the components the value correspond to.
I will also talk with the developers team to see if more general solution can be added in the Grid or the column menu, but for the time being, manually checking the operator is the only option for handling this.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Konstantin,
I already tried that but the problem is then firstFilterProps.onChange event.
First scenario:
firstFilterProps.operator = gte;
secondFilterProps.operator = lte;
// Start date
<DatePicker name='startDate' onChange={handleChange} value={firstFilterProps.operator === 'gte' && firstFilterProps.value ? new Date(firstFilterProps.value) : undefined} max={secondFilterProps.value ? new Date(secondFilterProps.value) : undefined} />
// End date
<DatePicker name='endDate' onChange={handleChange} value={secondFilterProps.value ? new Date(secondFilterProps.value) : firstFilterProps.operator === 'lte' && firstFilterProps.value ? new Date(firstFilterProps.value) : undefined} min={firstFilterProps.value ? new Date(firstFilterProps.value) : undefined}
/>
- Prop comes in as the firstFilterProps
- Only the second one was previously selected so the firstFilterProps.operator is now "lte"
- I populate the second field using the firstFilterProps
- Then I try to change the first field using firstFilterProps.onChange event
- The value is then gone from the second field and went into the first field.
Second scenario:
Add the check before firstFilterProps.onChange event and also check the operator something like this:
if (firstFilterProps.operator !== 'lte') firstFilteProps.onChange(...)But then again everything is working ok until you hit the Filter button and reopen the filter UI dropdown and you will see that the first field is again empty and the second one is only populated.
Hi Bogdan,
I have modified the example so it can keep and populate the correct filter components based on the operator:
You will notice that there are checks for the operator within the change events as well, not only for setting the existing expressions.
Please give it a try and let me know if you find any problems with the implementation.
Rank 1
Hi Konstantin,
Thanks :) I was able to use that code and adjust it a little bit so now it fits perfectly.
Cheers,
Bogdan