Rank 2
Iron
Iron
Hello.
Sorry for the question, but I'm confused. We use React Grid (5.12.0) together with Column menu filter and row filter. I have a problem if the filter is of type [date].
We store the date in the ISO type without Zulu time in the database. After refreshing the page, if the column menu filter of the date type tries to consume a date in the format: [YYYY-MM-DDTHH:mm:ss.SSS], the whole page crashes. This happens when I want to edit or delete a date value. Column menu filter is closed and I don't know how to force the filter to process the given format. Filter data is complex, we use both row filter and column filter together. Iterating everything and formatting the data is difficult. If I define the format above the column, it does not help. How can I solve it?
Here are the screen errors:
Another problem is why the code crashes with this error. I would expect the date picker to display an empty field and the console to report a warning.
Thank you
2 Answers, 1 is accepted
Hello Vladislav,
In order for a Grid column to apply its date format to the data item field values, the underlying data must be a JavaScript Date type. Regarding the filtering issues, please try to isolate the errors in a stackblitz example and list the exact steps that we should follow in order to reproduce them. Thus we will be able to test and debug it locally and suggest a solution for the scenario. You can use any of our examples as a starting point:
Looking forward to your reply.
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!
Rank 2
Iron
Iron
Hello.
OK,
here:
https://stackblitz.com/edit/react-nb7h8x-r63wtv?file=app%2Fapp.tsx
I used your example: https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter
In StackBlitz added the date column [DateTest]
In the [dataStateChange] event, I used the console and wrote out the state of the filter and based on it I created an initialization filter.
Then I simply clicked on icon:
..... and
Even your grid internally works with the ISO format. If I save your state in the DB and then want to use it again, it crashes.
I know, if I use the JS date type, its work well.
But we can't iterate through all the filters over all the columns.
Thanks.
Hi Vladislav,
The Grid does not work internally with string values for Date filter and the same error can be observed for the row filter if you add the following filter descriptor:
const initialFilter: CompositeFilterDescriptor = {
filters: [
{
field: 'TestDate',
operator: 'eq',
value: '2024-07-09T22:00:00.000Z',
}
],
logic: 'and',
};In order for the date filters to work, you need to ensure that you are passing a JavaScript Date object. For this you can map the initial filters and replace the string values with a Date object before setting them to the Grid. You can either check the filter descriptors by the field names of the date fields or check the value for the "Z" character (or a regular expression that will check if the string value is a date or not).