GridColumn format not working

Never mind, my fault (I knew I was doing something wrong :-P)

I passed the date field as a moment() object from moment.js (which I use to convert dates from multiple timezones). In many places a moment() can be used directly as a replacement for a Javascript Date object.

Apparently not here in Kendo Grid. When I changed the code to store moment.toDate() in the data I'm passing to Kendo, formatting works!

Sorry

If you just pass the data as a string to the Kendo Grid, I think it is clear that it can't correctly format it.

At some point in your code, you must take care of converting the string into a JS date object. And then pass that to Kendo.

HTH

I've implemented a generic withState HOC as shown on one guide in the kendo docs to allow me to interact with the kendo MVC libraries on the backend for end to end filtering functionality. I can add the `new Date()` call into the fetchData handler, but this has an important limitation: I intended to reuse this withState for multiple grids by passing in just the URL then configuring the columns as usual. But the date converting needs to know which properties have to be converted in order to work.

I could pass in a transform method perhaps, or a list of properties which must be converted, but it would be easier if per column I could just tell it to wrap the data in a date.

Can you think of any other ways to achieve this? 

I used your example but TypeScript does not like cell={KendoGridDateCell}

And the class has problems with dataItem and field in  "this.props.dataItem[this.props.field];"

Hi Ofer,

When using TypeScript you should provide type argument to the React Component as shown below:

class KendoGridDateCell extends React.Component<GridCellProps> {
    render() {
        const value = this.props.dataItem[this.props.field];
        return (
            <td>
                {formatDate(new Date(value), 'd')}
            </td>
        );
    }
}

Regards,
Vladimir Iliev
Progress Telerik

I have a component with a few columns. One of them is a date column. Now, I want to filter that column from the column menu filter but I'm unable to customize it. I want the filter to have a custom format like MM/dd/yy or dd/MM/yy (both placeholder and value) as per my locales. Can anybody guide me on how to do this? As the generic column filter menu is giving me month/day/year (placeholder) and same date format. Posting some bit of the code here.

Component.jsx

Here, joinDateFormat - is the MM/dd/yy or dd/MM/yy format. This is showing me the results from the API call perfectly fine. But I'm struggling with the column filter and its placeholder and date format as per my locale changes.

Hello, Dhara,

If the application will be localized we can recommend using the LocalizationProvider as it will automatically apply the correct data format to all KendoReact components, including the ColumnMenu:

https://www.telerik.com/kendo-react-ui/components/grid/globalization/

The other option will be to make a completely custom filter for the column menu and render the DatePickers using the required format

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-customizing-the-filter-component

https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/formats/

Regards,
Stefan
Progress Telerik

Hello, Neil,

I'm sorry to hear that this case is causing frustration.

Based on the details it seems that the field contains a date string instead of a javascript date object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

This date string has to be converted to a valid JavaScript object and it will be formated:

https://www.telerik.com/kendo-react-ui/knowledge-base/grid-date-format/

Regards,
Stefan
Progress Telerik