Is it possible to have both the sort when clicking on the column header and the checkbox filter for dates? The problem I'm having is that I want to format the date, at the moment I do that when I'm getting the data from the API and before passing it to the Grid component.
API date:
2022-06-23T00:46:53.8066667Z
Which gets formatted to:
23-06-2022
Because the date is already formatted, this works for displaying the correct formatted date in the grid and in the checkbox filter, and then filtering on the dates as well
<GridColumn
field={columnField}
title={'Modified'}
columnMenu={(props) => ColumnFilterSearchMenu(rowData, props)}
/>However, because the date is formatted and turned into a string, this breaks the sorting functionality. As you can see below the table column seems to be sorted on the first number (the day) rather than the entire date.
Is there a way to have both functionalities?
I've created a quick sandbox env where you can see the issue as well: https://codesandbox.io/s/still-water-186lbh?file=/src/index.js
1 Answer, 1 is accepted
Hello Dide,
Thank you for reaching out to us.
The data operations handled by the "process" method will be applied over the string values in this scenario and I have to say that this is the expected behavior. If you want the data operations to handle the values as Date objects, you need to keep the values as such in the data items. Note that you can set the "format" property of the Column in order to set custom format of the Date objects:
<GridColumn
field="orderDate"
filter="date"
format="{0:D}"
width="300px"
/>However, with the current implementation of the GridColumnMenuCheckboxFilter it is not possible to format the rendered values, so a custom implementation for the filterUI must be implemented, where you can display formatted value:
Another option would be to keep the current implementation that you have, but add additional field to the data items that will hold the Date objects. Then, within the onDataStateChange you can replace the sort expression generated for the string field in the new data state by changing it to use the date field. This will allow you to sort the items based on the date field, but keep the binding of the column to the string field.
Hope this helps.
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 2
Iron
Iron
Hi Konstantin,
Thanks so much for your reply. I've tried to implement your first suggestions, but the filtering doesn't seem to work. I've added it to the codesandbox here:
https://codesandbox.io/s/still-water-186lbh?file=/src/index.js
Is there anything I did wrong with the custom implementation for the filterUI ?
Many thanks,
Dide
Hi Dide,
The implementation is exactly what I have suggested and it is perfect. The problem with the filtering is actually caused by the stringifying of the Date objects and then the parsing to a Date object again. In that process, the milliseconds are lost and this causes difference in the dates. If the milliseconds are not relevant in your scenario, you can add the following regex while you are setting the Date object to the data items, which will remove the milliseconds:
const parsedData = products.map((item) => {
item.lastUpdDt = new Date(item.lastUpdDt.replace(/\.\d+/, ''));
return item;
});Here is the modified example with the above suggestion:
Rank 2
Iron
Iron