Cannot Display Date in Grid React

[Jemuel V Abrian]

Hi Support,

I am currently trying to display a date inside a grid but i keep getting empty cell.

Below is the screen i am referring to, please refer to the Expiry Date and Arrival Date columns:

This the my source code:

This is the data im trying to load, arrivalDate and expiryDate both have values, but are not displayed in the screen:

Any reply and suggestion will be appreciated, thanks and more power.

Regards.
Jem

[Ajith Govarthan]

Hi Jemuel, 

Thanks for contacting Syncfusion support. 

Based on your query the date column values is not displayed in the Grid. We checked the code example and we have created an sample with your code example but we are unable to reproduce the reported issue at our end.  

In your attached screenshot we have found that the date values are in string format and you can use the parseJson method to convert your date values in to actual date objects. For your convenience we have attached the sample so please refer the sample for your reference. 

Code example: 

Index.js 

   this.dataSource = DataUtil.parse.parseJson(data); 

 

    render() { 

        return (<div className='control-pane'> 

        <div className='control-section'> 

          <GridComponent id='gridcomp' dataSource={this.dataSource} allowPaging={true} pageSettings={{ pageCount: 5 }} editSettings={this.editSettings}> 

            <ColumnsDirective> 

              <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey={true} validationRules={this.validationRule}></ColumnDirective> 

              <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={this.validationRule}></ColumnDirective> 

              <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit'></ColumnDirective> 

              <ColumnDirective field='OrderDate' headerText='Order Date' type="datetime" format='dd/MM/yyyy' width='170'></ColumnDirective> 

                            <ColumnDirective field='ShippedDate' headerText='Shipped Date' type="datetime" format='dd/MM/yyyy' width='170'></ColumnDirective> 

    <ColumnDirective headerText='Commands' width='120' commands= {this.commands}/> 

            </ColumnsDirective> 

            <Inject services={[Page, CommandColumn, Edit]}/> 

          </GridComponent> 

      </div> 

      </div>); 

    } 

Sample Link: https://stackblitz.com/edit/react-vhaogj-epqwhj?file=index.js 

If the above solution doesn’t meet your requirement then please share the below details to find the root cause of the issue. 

1. If possible please try to reproduce the issue in the attached sample. 

2. Share the Syncfusion package version. 

Regards, 

Ajith G. 

[Jemuel V Abrian]

Hi Support,

Thanks for the prompt reply.

I am now able to display the dates by using a different approach.

Previously i was using datamanager as the datasource of the my grid, please see below

But I changed the approach to include the list in the ajax call being done above.

Making the json return like this

Then  setting the json to the state

And making this state to be the datasource of my grid

This worked and now i am able to display the dates without any parsing.

But it is a puzzle on my side, i am not sure why it needs to have a different approach for the dates to be displayed.

Anyways it is working now, i hope someone with the same problem as mine will be helped by this post.

Thanks for the support,

Jem

[Balaji Sekar]

Hi Jemuel, 

 

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

 

Regards, 

Balaji Sekar