GRID Column Date Format

1 Answer 3482 Views
General Discussions
Joe
Top achievements
Rank 1
Joe asked on 03 Apr 2018, 05:31 PM

Hello,

I have a GridColumn which is a date in ISO format. I have added the format option,"0:MMM yyyy", to obtain an understanding of how the process functions. The format appears to be ignored as the ISO format is displayed.  Is there a property where I should be specifying the datatype for each column?

I am including my rendering for reference:

 <Grid data={this.props.dataItem.details}>
                <Column field="status" title="Status" width="120px" />
                <Column field="status_Notes" title="Status Notes" />
                <Column field="status_Date" title="Status Date" format="0:MMM yyyy" />
  </Grid>

Best regards,

Joe

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 Apr 2018, 07:28 AM
Hello, Joe,

Thank you for the provided code.

I can assume that the issue occurs because the format value has to be in brackets "{}":

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

I made an example using the desired format and the dates appeared as expected:

https://plnkr.co/edit/XyiuYFRl3aJj3leqHuuz?p=preview

Please advised if I missed something.

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
Joe
Top achievements
Rank 1
commented on 06 Apr 2018, 01:25 AM

Stefan,

   Thank you for your prompt response. I should have noted that my data was coming from a RESTful service. Using your reply and information from here, I was able to resolve my issue. basically I need to convert any date field from string to data in the returned JSON. For completeness here is the source of the JSON solution and my code snippets:

Afajx call:

           .then(function (ajaxData) {
                let obj = JSON.parse(JSON.stringify(ajaxData), dateConvert);
                this.setState({ approvals: obj });   
            }.bind(this))

 

And the function:

const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/;  
function dateConvert(key, value) {
    if (typeof value === "string" && dateFormat.test(value)) {
        return new Date(value);
    }

    return value;
}

Best regards,

Joe

 

 

 

Tags
General Discussions
Asked by
Joe
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or