We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Setting the Timepicker Timezone in the Datagrid

We are in the utc+9 time zone

1.png

 

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

 

2.png

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()
        });
    }

 

 


1 Reply

RS Rajapandiyan Settu Syncfusion Team November 15, 2022 08:49 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon