Wijmo 5 FlexGrid Column formatting for JSON date data-types

Wijmo 5 FlexGrid Column formatting for JSON date data-types

Posted by: rmiller2 on 14 September 2017, 11:36 am EST

• 

  rmiller2

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:36 am EST

  I have a FlexGrid Column defined as follows for a JSON date data value:

          <wj-flex-grid-column header="Invoice Date" binding="invoiceDate" width="150" align="center" data-type="Date" format="d">
              {{$item.invoiceDate | date: d}}
          </wj-flex-grid-column>
  

  You’ll note from the screen shots provided that the AngularJS tag {{$item.invoiceDate | date: d}} will format the date properly. However, I cannot get the Wijmo FlexGrid to perform this same formatting. When I open the filter dialog for that column, it shows in YYYY-MM-DDTHH:MM:SS format. According to your own documentation on Globalization, I should be able to use any of the formats defined here: https://msdn.microsoft.com/en-us/library/az4se3k1(v=vs.110).aspx.

  This documentation points out that a “d” specification should result in the following short date formatting: 2009-06-15T13:45:30 -> 6/15/2009 (en-US).

  Could you please advise on how to get the FlexGrid to format these kind of date values? Thank you.
  
  

  

• 

  austinnichols

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  You may want to check out this forum post which provides a solution:

  http://wijmo.com/topic/format-date-cell-in-flexgrid/

• 

  rmiller2

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  With JSON data transfer becoming the norm, it would be nice if this was an out-of-the-box capability in Wijmo?

• 

  rmiller2

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  This isn’t even really a good solution. What if the JSON result set had 500 records with three date columns. It would require an iteration through the entire result set modifying all of the date columns returned. Can this become a feature request for the next release?

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Hello,

  As per the screenshots provided by you above it seems that you are able to display the correctly formatted date in FlexGrid, however the filter dialog displays the unformatted date.

  On further investigation at my end I could observe that if I bind the date column with actual date values then it formats the dates correctly in the column as well as the filter dialog. However, if I bind it to JSON dates i.e. date string then it does not formats the date neither in the FlexGrid column nor in the Filter dialog which is the expected behaviour currently as described in the forum post referenced above. Kindly refer to the attached screenshots which depicts the described behaviour.

  Kindly refer to the attached sample used for testing. I would request you to modify the sample to depict the issue you are currently facing. Please let us know are you able to format the values in the FlexGrid column and are not bale to format them when being displayed in the filter dialog. Please confirm the behaviour observed at your end, so that we can accordingly guide you ahead with this issue.

  Thanks,
  
  Manpreet Kaur
  
  

  

  

  2016/05/DateFormatFilter.html

• 

  rmiller2

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  The problem is with JSON dates. The wj-flex-grid-column doesn’t seem to work with a date in JSON format in either the grid column display or the filter dialog. The only way I am able to display a JSON date in the grid is to use an AngularJS tag with a format filter (i.e. {{$item.complaintStatusDate | date: d}}).

  Using the sample mark up below results in column 1 display a formatted date in the grid, but the filter dialog does not filter. Column 2 will not format either the grid display or the filter dialog.

  With JSON data becoming the standard in data transfer, it is not practical to iterate through the data converting every JSON date into a JavaScript date. Especially if that data set has numerous date columns.

          <wj-flex-grid-column header="Date" binding="complaintStatusDate" width="100" align="center" data-type="Date" format="d">
              {{$item.complaintStatusDate | date: d}}
          </wj-flex-grid-column>
          <wj-flex-grid-column header="Date" binding="complaintStatusDate" width="150" align="center" data-type="Date" format="d"></wj-flex-grid-column>
  

• 

  patrick-rueckert

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  I would like to back rmiller2 here, I ran into the same issues.
  
  Can we get a feature that handles JSON dates out of the box?

• 

  annupurnap

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Hi Miller/ PatR,

  We are able to reproduce issue at our end as you described. We suggest you to format the property to corresponding data types and then bind to FlexGrid.
  
  For reference kindly refer to fiddle http://jsfiddle.net/mkgupta911/vqt6x5fw/ which implements this.

  Hope it helps.

  Thanks

• 

  rmiller2

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  This is certainly a means to solve the problem, however, having to iterate the incoming data doesn’t seem like this is what one should be required to do when purchasing a toolset designed around API data in JSON format. I’ve even come to discover that when I store the value from the date input control in local storage, I am given a date value in JSON format, and yet I can’t give that same value back to the control for rebinding unless I convert it to a Java Script date.

  I would like to see Wijmo handle JSON dates without having to write date handling code throughout the application.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Hi,
  
  We have escalated this issue to our development team for further investigation with tracking id : 202923. As soon we get any update, we will notify you.
  
  Thanks,
  
  Manish Kumar Gupta

• 

  hitmanmcc

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  I support this motion, currently we have to have dedicated custom parsing behaviour for all resources to ensure that our dates display properly. This is cumbersome and error prone and it gets worse the more complex the resource objects are.
  
  It would be a major boon if controls would just handle JSON dates properly.

• 

  simon-cragg

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Is this feature coming anytime soon? Do you have a rough ETA? I am not a fan of having to iterate over my result set in order to transform my JSON date string into a Date object.

  Many Thanks
  
  Simon

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Hi Simon,
  
  This issue is still with development team. We have requested for an update. We will notify as soon as we get any notification.

  Thanks,
  
  Manish Kumar Gupta

• 

  simon-cragg

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Hi Manish,

  Many thanks for your update. It would be super helpful if this could be handled inside the flexgrid / flexsheet components. In the meantime I was wondering if I could create a custom pipe to convert the JSON date string into a Date object and then use it in the column’s binding attribute? As shown below:-

  <wj-flex-grid-column [header]="'Created Date'" [binding]="'createdDate | jsonToDatePipe'" [format]="'dd/MM/yyyy'"></wj-flex-grid-column>

  Would the binding attribute evaluate the pipe?

  Regards
  
  Simon

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:36 am EST

  Hello all

  The FlexGrid does not de-serialize or parse data at all (except when coercing user edits). It simply renders the data in whatever format it was received. Therefore, “false”, “123”, “12:12”, and “12/12/12” are all just strings.

  If you are using JSON to serialize/de-serialize the data (a common scenario), then you should be aware that JSON does not de-serialize Date objects. It’s a known (and IMHO pretty lame) limitation.

  The simple/standard solution is to use a ‘reviver’ function in your call to JSON.parse so date objects serialized as strings are converted back to dates when de-serializing.

  This fiddle demonstrates:

  http://jsfiddle.net/Wijmo5/ene3rLmb/
  

  You can read more about this here:

  http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx
  

  I hope this information helps.

• 

  Rajthayi

  • Post Options:
  • Link
    Copy

  Posted 6 October 2017, 6:42 pm EST

  Hi Manish and Wijmo Team,

  Looks like this Dev request 202923 has been open from 2016. Any ETA on when this date issue will be addressed natively by wijmo controls.

  Would appreciate an ETA.

  Thanks
  
  Raj

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 10 October 2017, 12:33 am EST

  Hi Raj,
  
  This issue has been replied by our developer Bernardo. Please see the answer below:[quote=“bernardo”]
  
  Hello all

  The FlexGrid does not de-serialize or parse data at all (except when coercing user edits). It simply renders the data in whatever format it was received. Therefore, “false”, “123”, “12:12”, and “12/12/12” are all just strings.

  If you are using JSON to serialize/de-serialize the data (a common scenario), then you should be aware that JSON does not de-serialize Date objects. It’s a known (and IMHO pretty lame) limitation.

  The simple/standard solution is to use a ‘reviver’ function in your call to JSON.parse so date objects serialized as strings are converted back to dates when de-serializing.

  This fiddle demonstrates:

  http://jsfiddle.net/Wijmo5/ene3rLmb/
  

  You can read more about this here:

  http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx
  

  I hope this information helps.
  
  [/quote]

  Thanks,
  
  Manish Kr Gupta

• 

  gregfrazer

  • Post Options:
  • Link
    Copy

  Posted 13 December 2017, 7:59 pm EST

  I understand what Bernardo is saying, but the FlexgridFilter must do some “date Math” to do the comparisons.
  
  I agree with @rmiller2.
  
  Wijmo ought to allow UTC dates and then internally use “date Math” for comparison on filter/sorting/grouping.
  
  I have 5000 rows and 439, 000 cells in what is a small-ish grid (later to be 200,000 rows).
  
  If I have to examine every field in the itemsSource to insert data objects, I fear the performance will make the grid unworkable.

  It the cells date is ‘2017-12-14T00:00:00Z’ ,
  
  then FlexGrid.getCellData(row,col,false) will return ‘2017-12-14T00:00:00Z’
  
  and FlexGrid.getCellData(row,col,true) will return ‘14/12/2017’ (for GB and AU) and ‘12/14/2017’ (for US)
  
  so how is that not parsing the date object.

  All we ask is that you allow UTC dates and do ‘date Math’ based on the browser settings

• 

  Calvin.Craig

  • Post Options:
  • Link
    Copy

  Posted 23 August 2018, 12:06 pm EST

  It might prove easier and more efficient to simply fix up the known date fields rather than looping through all fields and all records in the JSON deserialization process. Since, Angular 6’s HttpClient already deserializes responses, date fix-up can be performed after the fact.

  
      public fetchHubAssemblyValidationFacetsHistory(ecnNumbers: number[]): Observable<IHubAssemblyValidatedFacetHistory[]> {
          const url = this.baseUrlBuilt + 'api/hubassembly/validation-facets-history/' + ecnNumbers.join(',');
          return this.http.get(url)
              .pipe(map((response: IHubAssemblyValidatedFacetHistory[]) => {
                  response.forEach(_ => {
                      _.ValidFrom = new Date(_.ValidFrom); // Declared as a date in the IHubAssemblyValidatedFacetHistory interface
                      _.ValidTo = new Date(_.ValidTo); // but it's not fixed-up as a date by HttpClient
                  });
                  return response;
              }));
      }