ODataCollectionView Date Formatting On Flex Grid

ODataCollectionView Date Formatting On Flex Grid

Posted by: paulr on 16 December 2020, 2:30 pm EST

• 

  paulr

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 2:30 pm EST - Updated 3 October 2022, 2:57 pm EST

  I seeing an issue with the way dates are display on the flex grid. I have an OData backend servlet which is returning products.

  I am using Wijmo FlexGrid with React and define it like this:

  
      let oDataView = new odata.ODataCollectionView(
        "http://localhost:8080/ReportService.svc",
        "Products",
        {
          pageSize: 6,
          pageOnServer: true,
          sortOnServer: true,
        }
      );
  
  

  The OData metadata returned by my backend service is returning a Date property of type Edm.DateTimeOffset:

  
  <?xml version="1.0" encoding="UTF-8"?>
  <edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
     <edmx:DataServices>
        <Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="OData.Report">
           <EntityType Name="Product">
              <Property Name="Date" Type="Edm.DateTimeOffset" />
  ....
  
  

  The JSON returned by the call to products returns:

  http://localhost:8080/ReportService.svc/Products?$format=json&$count=true&$skip=0&$top=6

  
  {
     "@odata.context":"$metadata#Products",
     "@odata.count":58,
     "value":[
        {
           "Date":"2020-12-14T15:01:48.726-05:00",
  ...
  
  

  The problem is that the Date column on my Flex Grid is not displaying time - it’s only showing the date:

  

  How can I make Flex Grid show the time and not just the date?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 December 2020, 2:03 pm EST

  Hi Paul,

  To display the time part too, you may set the format of column as “MM/dd/yyyy hh:mm tt”. Please refer to the following code snippet:
  
  grid.columns[0].format = “MM/dd/yyyy hh:mm tt”;

  Regards
  
  Sharad

• 

  paulr

  • Post Options:
  • Link
    Copy

  Posted 18 December 2020, 4:49 pm EST

  Hi Sharad,

  The backend server can return arbitrary columns - the client code should not be required to be aware of the columns or their order. Is there a way to avoid changing javascript code?

  Paul

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 December 2020, 4:34 pm EST

  Hi Paul,

  In this case, you may override the default date format using the following code:

  var oldFn = wijmo.Globalize.formatDate;
      wijmo.Globalize.formatDate = function(value, format){
          // override default "d" format
          if(format == "d"){
              return oldFn.call(this, value, "MM/dd/yyyy hh:mm tt");
          }else {
              return oldFn.call(this, value, format);
          }
      }
  

  Regards