This is a migrated thread and some comments may be shown as answers.

GridColumn format not working

15 Answers 636 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 02 Jul 2018, 09:22 AM

Hi all

probably I'm doing something completely wrong :-) I try to put a custom date format on one of my Grid columns, with the following

<GridColumn field='Updated' filter={'date'} format="{0: yyyy-MM-dd HH:mm:ss}" width={'120px'}/>

 

No matter what format I'm trying to put into the spec, the date always shows in my browser locale, e.g. Is there something else I must configure?

Mon Jul 02 2018 11:21:29 GMT+0200

15 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 02 Jul 2018, 09:36 AM

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

0
Stefan
Telerik team
answered on 03 Jul 2018, 06:30 AM
Hello, Joe,

I'm glad to hear that the issue is resolved.

In addition, we would like to thank you for sharing the exact issue as our users could hit the same case.

We will check if there is a specific reason why the Grid is not picking moment.js date initially. 

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
IT Dept
Top achievements
Rank 1
answered on 27 Aug 2018, 01:36 PM
I'm having a similar issue, but in my case the server is just returning date as a string like "2018-08-16T18:25:14.227", and the date formatting logic will not change it. 

```<GridColumn
field="created"
title="Created Date"
filter="date"
format="{0: MM/dd/yyyy}"
width={180}
/>```
0
Joe
Top achievements
Rank 1
answered on 27 Aug 2018, 01:59 PM

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

0
Stefan
Telerik team
answered on 28 Aug 2018, 07:16 AM
Hello, Eric,

Joe is right.

In order to apply the correct format, the Grid expected the values inside the column to be valid date objects.

In cases like this, the cases could be pre-processed before passing it to the Grid. The same is valid for the numbers formatting as well.

Please let me know if you need more details on this matter.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
IT Dept
Top achievements
Rank 1
answered on 19 Sep 2018, 12:20 PM

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? 

 

0
Stefan
Telerik team
answered on 20 Sep 2018, 08:54 AM
Hello, Eric,

There is a per column approach that can be used.

A reusable custom date cell can be created that will only format the dates:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cell

This is an example of how it can be achieved:

https://stackblitz.com/edit/react-8u5bgw?file=app/main.js

This date cell can then be used in every date column that has to show formatted date which value is received as a string.

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ofer
Top achievements
Rank 1
Veteran
answered on 19 Feb 2020, 08:52 PM

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];"

0
Vladimir Iliev
Telerik team
answered on 21 Feb 2020, 07:52 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dhara
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 04:49 AM

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

 

import { Grid } from '@progress/kendo-react-grid';
import { GridColumnMenuFilter } from '@progress/kendo-react-grid';
 
<Grid useColumnFilterMenu>
    <Column
        field="joinDate"
        title={locale('joinDateTitle')}
        format={`{0:${locale('joinDateFormat')}}`}
        filter="date"
        columnMenu={props => {
            <GridColumnMenuFilter {...props} />
        }
     />
....
....
</Grid>

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.

 

0
Stefan
Telerik team
answered on 27 Aug 2020, 10:54 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Neil
Top achievements
Rank 1
answered on 13 Sep 2020, 12:44 PM
Sharing my frustration here.. I have a Date value from api, still not formatted 
with the format prop.. 
0
Stefan
Telerik team
answered on 14 Sep 2020, 10:44 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Neil
Top achievements
Rank 1
answered on 14 Sep 2020, 12:25 PM
The field is DateTime type from api written in c#, okay i guess i need to have explicit conversion here. Thanks.
0
Neil
Top achievements
Rank 1
answered on 19 Sep 2020, 05:48 AM
Okay. I got it...

    FormatCellDate = (e) => {
        return (<td>{moment(e.dataItem[e.field]).format('DD-MMM-yyyy')}</td>);
    }
Tags
General Discussions
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Stefan
Telerik team
IT Dept
Top achievements
Rank 1
Ofer
Top achievements
Rank 1
Veteran
Vladimir Iliev
Telerik team
Dhara
Top achievements
Rank 1
Veteran
Neil
Top achievements
Rank 1
Share this question
or