GridColumn format not working

16 posts, 0 answers
  1. Joe
    Joe avatar
    8 posts
    Member since:
    May 2015

    Posted 02 Jul 2018 Link to this post

    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
  2. Joe
    Joe avatar
    8 posts
    Member since:
    May 2015

    Posted 02 Jul 2018 Link to this post

    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

  3. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 03 Jul 2018 Link to this post

    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
  4. Eric
    Eric avatar
    48 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2018 Link to this post

    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}
    />```
  5. Joe
    Joe avatar
    8 posts
    Member since:
    May 2015

    Posted 27 Aug 2018 in reply to Eric Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 28 Aug 2018 Link to this post

    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
  7. Eric
    Eric avatar
    48 posts
    Member since:
    Aug 2012

    Posted 19 Sep 2018 in reply to Stefan Link to this post

    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? 

     

  8. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 20 Sep 2018 Link to this post

    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
  9. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 19 Feb 2020 in reply to Stefan Link to this post

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

  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 21 Feb 2020 Link to this post

    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
  11. Dhara
    Dhara avatar
    8 posts
    Member since:
    Aug 2017

    Posted 26 Aug 2020 Link to this post

    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.

     

  12. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 27 Aug 2020 Link to this post

    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).

  13. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 13 Sep 2020 in reply to Stefan Link to this post

    Sharing my frustration here.. I have a Date value from api, still not formatted 
    with the format prop.. 
  14. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 14 Sep 2020 Link to this post

    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).

  15. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 14 Sep 2020 in reply to Stefan Link to this post

    The field is DateTime type from api written in c#, okay i guess i need to have explicit conversion here. Thanks.
  16. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 19 Sep 2020 in reply to Neil Link to this post

    Okay. I got it...

        FormatCellDate = (e) => {
            return (<td>{moment(e.dataItem[e.field]).format('DD-MMM-yyyy')}</td>);
        }
Back to Top