Manipulate WebAPI data destined for a Grid

[Verum Genus]

I am trying to add a column to my Grid, that has a countdown.  My API gives me a UTC date, so I need to convert it to local time on the browser, then get the how long until it happens.

it looks like i can use this to get my date to local time (not sure if its working or not):

DataUtil.serverTimezoneOffset = new Date().getTimezoneOffset()/60;

And I can use this to get the countdown working:

import {VueCountdown} from '@chenfengyuan/vue-countdown';
  components: {
    VueCountdown
  },

What I am not sure is how to hook that into a e-column (at the moment I am just displaying HH:MM dd/MM/yyyy:

<ejs-grid :dataSource='data'>
<e-column field='regoExpires' headerText='Expires'  type="dateTime" format="HH:MM dd/MM/yyyy" width=180></e-column>
<e-columns>
</ejs-grid>

My data from a WebApiAdapter:

return {
      data: new DataManager({
        url: 'http://example.com/api/v1/rego',
        adaptor: new WebApiAdaptor(),
        crossDomain: true,
        offline: true
      }),

thanks

[Hemanthkumar S]

Hi Verum Genus,

Greeting from syncfusion support.

Query: Manipulate WebAPI data destined for a Grid

The Grid component will automatically convert the DateTime values from UTC to the local time zone with the help of serverTimeZoneOffest and display them in the Grid. When you give the serverTimeZoneOffset value as “0” it shows the exact UTC. The serverTimezoneOffset value may be given based on the time zone value to be displayed on the grid.

From your shared information we suspect that you are trying to add a column that has a countdown value. The column template has options to display a custom element instead of a field value in the column. Based on your update we recommend that use a column template for displaying the countdown value.

For more information please refer to the below Documentation and Demo Sample.

Column Template Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/column-template

Column Template Demo Sample: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/grid/column-template.html

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S