[Solved] Grid | Date Filter | GridCell

[Lori]

Hi

Trying to get the date filters working on my grid. My dates are returning via an API call - all the dates are in ISO date format.

I've implemented the GridCell as follows but noted that formatDate returns a string rather than a date - is this correct?

class KendoGridDdateCell extends GridCell{
   public render() {
    var value = formatDate(new Date(  this.props.dataItem[this.props.field], "d")
    return (
    <td>
{value}
</td>
    );
}
}

 

Also on the grid itself after turning on the date filters for the cell the 

<Column field="fields.myDateFild" title="date"  filter="date" cell={KendoGridDdateCell}/>

 

The Filter itself always shows Month/Day/year - how can we make the filter show Day/Month/Year? Without this the dates filter wont work.

Any help or pointers on this would be fantastic.

 

[Stefan]

Hello, Lori,

When working with ISO date strings we recommend parsing the strings to a valid JavaScripts date objects after they are received from the server. This will remove the need for a custom cell and it will also allow filtering to work out of the box:

https://stackblitz.com/edit/react-xhutuz-4pgpp2?file=app/main.js

As for the filter cell, if any of its properties have to be changed as in this case the format, a custom filter cell has to be used. The following example demonstrates how to implement a filter cell:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cell 

Regards,
Stefan
Progress Telerik