Setting the Timepicker Timezone in the Datagrid

[TaeWook Kang]

We are in the utc+9 time zone

 

When we enter a new time to update, the setting of the time is set based on utc

 

If you select a date from the time selector and update it, you can check that the time before 9 hours has entered when you call 'method'.

 

All dates for 'mssql' data have been changed to 9 hours ago.

In addition, it can be confirmed that not only the updated cell but also the value of the previous data is updated to the value of 9 hours ago.

 

 

I checked several other threads, but I couldn't solve them.

 

'Set the servertimezoneoffset' does not even apply to code.

 

       <script>

            ej.data.DataUtil.serverTimezoneOffset = (2 * (new Date().getTimezoneOffset() / 60));   //Set the servertimezoneoffset
        </script>
        <div class="row">
            <div class="col-xl-12">
                <ejs-grid id="DeliveryGrid" created="GridSetting" gridLines="Both" toolbar="@(new List<string>() {"Update", "Cancel" })" allowResizing="true" height="560">
                    <e-grid-editSettings allowAdding="false" allowEditing="true" allowDeleting="true" mode="Batch"></e-grid-editSettings>
                    <e-grid-columns>
                        <e-grid-column field="DSPLN_NM" headerText="DISCIPLINE" textAlign="Center" width="100" maxWidth="120" allowEditing="false"></e-grid-column>
                        <e-grid-column field="ITEM_NM" headerText="ITEM NAME" headerTextAlign="Center" textAlign="Left" width="400" maxWidth="500" allowEditing="false"></e-grid-column>
                        <e-grid-column field="DIN_CODE" headerText="DIN CODE" textAlign="Center" width="120" maxWidth="150" allowEditing="false"></e-grid-column>
                        <e-grid-column headerText="ALL" headerTextAlign="Center" allowResizing="true" textAlign="Center"
                                       columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                                            new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "IFP (E0040)", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "IFP_PLAN", Width = "110", HeaderText = "PLAN", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"},
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "IFP_TR", Width = "110", HeaderText = "TR", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"}}},
                                            new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "IFD (E0090)", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "IFD_PLAN", Width = "110", HeaderText = "PLAN", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"},
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "IFD_TR", Width = "110", HeaderText = "TR", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"}}},
                                             new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "IFC (E0100)", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "IFC_PLAN", Width = "110", HeaderText = "PLAN", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"},
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "IFC_TR", Width = "110", HeaderText = "TR", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"}}},
                                            new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "AS-BUILT (E0120)", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "AS_BUILT_PLAN", Width = "110", HeaderText = "PLAN", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"},
                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "AS_BUILT_TR", Width = "110", HeaderText = "TR", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="10", Format="yyyy-MM-dd", Type="date", EditType="datepickeredit"}}}})">
                        </e-grid-column>
                        <e-grid-column field="INFORM_DAY" headerText="INFORM DAY" textAlign="Center" allowResizing="true" width="120" maxWidth="200"></e-grid-column>
                        <e-grid-column field="IN_DATE" headerText="IN DATE" textAlign="Center" allowResizing="true" width="120" maxWidth="200" Format="yyyy/MM/dd" Type="date" allowEditing="false"></e-grid-column>
                    </e-grid-columns>
                </ejs-grid>
            </div>
        </div>

  function GridSetting() {
        var JobNo = sessionStorage.getItem('JobKey');
        var DataGrid = document.getElementById("DeliveryGrid").ej2_instances[0];


        DataGrid.dataSource = new ej.data.DataManager({
            url: "/DeliverableItem/DivbScheduleURL?JobNo=" + JobNo,
            crudUrl: "/DeliverableItem/DivbScheduleCRUD?JobNo=" + JobNo,
            adaptor: new ej.data.UrlAdaptor()
        });
    }

 

 

[Rajapandiyan Settu]

Hi Taewook,

Thanks for contacting Syncfusion support.

By default, when we use remote data, the Grid will automatically convert the Local time into UTC time and send it to the server for all the data actions like CRUD, Filtering, etc., In the same way, the server will return the UTC time and it will be converted to local time and shown in Grid. This is the default behavior of Grid.

If you want to send the same date value to the server without time conversion, You can achieve this by using the following code example in the actionBegin event of Grid.

actionBegin: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin

  function actionBegin(args) {

    if (args.requestType === 'save') {

       // we have increased the time based on Indian time zone (+5hr 30 mins)… In the same way, you can increase the time based on your time zone (+9hrs 00mins)…

      // convert the hours based on your timezone

      args.data.OrderDate.setHours(args.data.OrderDate.getHours() + 5);

      // convert the minutes based on your timeone

      args.data.OrderDate.setMinutes(args.data.OrderDate.getMinutes() + 30);

    }

  }

 

Regards, 

Rajapandiyan S