syncfusion-content · SyncfusionBuild · Mar 21, 2025 · Mar 21, 2025
diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/app-composition.vue b/ej2-vue/code-snippet/grid/databind/databinding-timezone/app-composition.vue
@@ -0,0 +1,104 @@
+<template>
+  <div id="app">
+    <div style="display: flex; align-items: center; margin-bottom: 10px">
+      <label style="margin-right: 10px">Select Timezone:</label>
+      <ejs-dropdownlist
+        id="timezone"
+        width="150px"
+        :dataSource="timeZones"
+        :fields="field"
+        v-model="selectedTimezone"
+        :change="onTimezoneChange"
+      ></ejs-dropdownlist>
+    </div>
+    <div style="margin-bottom: 10px">
+      <ejs-checkbox
+        label="Prevent Timezone Conversion"
+        ref="timezoneCheckboxRef"
+        :change="onCheckboxChange"
+      ></ejs-checkbox>
+    </div>
+    <ejs-grid ref="grid" :dataSource="data" :height="315" :load="load">
+      <e-columns>
+        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
+        <e-column field="CustomerID" headerText="Customer ID" width="140"></e-column>
+        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C" width="120"></e-column>
+        <e-column field="OrderDate" headerText="Order Date" textAlign="Right" width="140"></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
+import { CheckBoxComponent as EjsCheckbox } from "@syncfusion/ej2-vue-buttons";
+import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
+import { DataManager, WebApiAdaptor, DataUtil } from "@syncfusion/ej2-data";
+
+const SERVICE_URI = "https://services.syncfusion.com/vue/production/";
+const data = new DataManager({
+  url: SERVICE_URI + 'api/Orders',
+  adaptor: new WebApiAdaptor(),
+  crossDomain: true
+})
+const selectedTimezone =ref(-12);
+const grid=ref(null);
+const timezoneCheckboxRef=ref(null);
+const field ={ text: "text", value: "value" };
+const timeZones= [
+  { value: -12, text: "-12:00 UTC" },
+  { value: -11, text: "-11:00 UTC" },
+  { value: -10, text: "-10:00 UTC" },
+  { value: -9, text: "-09:00 UTC" },
+  { value: -8, text: "-08:00 UTC" },
+  { value: -7, text: "-07:00 UTC" },
+  { value: -6, text: "-06:00 UTC" },
+  { value: -5, text: "-05:00 UTC" },
+  { value: -4, text: "-04:00 UTC" },
+  { value: -3, text: "-03:00 UTC" },
+  { value: -2, text: "-02:00 UTC" },
+  { value: -1, text: "-01:00 UTC" },
+  { value: 0, text: "+00:00 UTC" },
+  { value: 1, text: "+01:00 UTC" },
+  { value: 2, text: "+02:00 UTC" },
+  { value: 3, text: "+03:00 UTC" },
+  { value: 4, text: "+04:00 UTC" },
+  { value: 5, text: "+05:00 UTC" },
+  { value: 5.5, text: "+05:30 UTC" },
+  { value: 6, text: "+06:00 UTC" },
+  { value: 7, text: "+07:00 UTC" },
+  { value: 8, text: "+08:00 UTC" },
+  { value: 9, text: "+09:00 UTC" },
+  { value: 10, text: "+10:00 UTC" },
+  { value: 11, text: "+11:00 UTC" },
+  { value: 12, text: "+12:00 UTC" },
+  { value: 13, text: "+13:00 UTC" },
+  { value: 14, text: "+14:00 UTC" },
+];
+
+const onTimezoneChange = function(args) {
+  selectedTimezone.value = Number(args.value);
+  grid.value.ej2Instances.freezeRefresh();
+};
+
+const onCheckboxChange = function(args) {
+  grid.value.ej2Instances.freezeRefresh();
+};
+
+const load = function(args) {
+  DataUtil.serverTimezoneOffset = timezoneCheckboxRef.value.ej2Instances.checked
+  ? 0
+  : selectedTimezone.value;
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
+</style>
diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/app.vue b/ej2-vue/code-snippet/grid/databind/databinding-timezone/app.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="app">
+    <div style="display: flex; align-items: center; margin-bottom: 10px">
+      <label style="margin-right: 10px">Select Timezone:</label>
+      <ejs-dropdownlist
+        id="timezone"
+        width="150px"
+        :dataSource="timeZones"
+        :fields="field"
+        v-model="selectedTimezone"
+        :change="onTimezoneChange"
+      ></ejs-dropdownlist>
+    </div>
+    <div style="margin-bottom: 10px">
+      <ejs-checkbox
+        label="Prevent Timezone Conversion"
+        ref="timezoneCheckboxRef"
+        :change="onCheckboxChange"
+      ></ejs-checkbox>
+    </div>
+    <ejs-grid ref="grid" :dataSource="data" :height="315" :load="load">
+      <e-columns>
+        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
+        <e-column field="CustomerID" headerText="Customer ID" width="140"></e-column>
+        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C" width="120"></e-column>
+        <e-column field="OrderDate" headerText="Order Date" textAlign="Right" width="140"></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+<script>
+import { GridComponent, ColumnsDirective, ColumnDirective} from "@syncfusion/ej2-vue-grids";
+import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
+import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
+import { DataManager, WebApiAdaptor, DataUtil } from "@syncfusion/ej2-data";
+export default {
+  name: "App",
+  components: {
+  "ejs-grid":GridComponent,
+  "e-columns":ColumnsDirective,
+  "e-column":ColumnDirective,
+  "ejs-checkbox": CheckBoxComponent,
+  "ejs-dropdownlist":DropDownListComponent
+  },
+
+  data() {
+    let SERVICE_URI = "https://services.syncfusion.com/vue/production/";
+    return {
+      data: new DataManager({
+        url: SERVICE_URI + 'api/Orders',
+        adaptor: new WebApiAdaptor()
+      }),
+      selectedTimezone: -12,
+      field: { text: "text", value: "value" },
+      timeZones: [
+        { value: -12, text: "-12:00 UTC" },
+        { value: -11, text: "-11:00 UTC" },
+        { value: -10, text: "-10:00 UTC" },
+        { value: -9, text: "-09:00 UTC" },
+        { value: -8, text: "-08:00 UTC" },
+        { value: -7, text: "-07:00 UTC" },
+        { value: -6, text: "-06:00 UTC" },
+        { value: -5, text: "-05:00 UTC" },
+        { value: -4, text: "-04:00 UTC" },
+        { value: -3, text: "-03:00 UTC" },
+        { value: -2, text: "-02:00 UTC" },
+        { value: -1, text: "-01:00 UTC" },
+        { value: 0, text: "+00:00 UTC" },
+        { value: 1, text: "+01:00 UTC" },
+        { value: 2, text: "+02:00 UTC" },
+        { value: 3, text: "+03:00 UTC" },
+        { value: 4, text: "+04:00 UTC" },
+        { value: 5, text: "+05:00 UTC" },
+        { value: 5.5, text: "+05:30 UTC" },
+        { value: 6, text: "+06:00 UTC" },
+        { value: 7, text: "+07:00 UTC" },
+        { value: 8, text: "+08:00 UTC" },
+        { value: 9, text: "+09:00 UTC" },
+        { value: 10, text: "+10:00 UTC" },
+        { value: 11, text: "+11:00 UTC" },
+        { value: 12, text: "+12:00 UTC" },
+        { value: 13, text: "+13:00 UTC" },
+        { value: 14, text: "+14:00 UTC" },
+      ],
+    };
+  },
+  methods: {
+    onTimezoneChange(args) {
+      this.selectedTimezone = Number(args.value);
+      this.$refs.grid.ej2Instances.freezeRefresh();
+    },
+    onCheckboxChange(args) {
+      this.$refs.grid.ej2Instances.freezeRefresh();
+    },
+    load(args) {
+      DataUtil.serverTimezoneOffset = this.$refs.timezoneCheckboxRef.ej2Instances.checked
+        ? 0
+        : this.selectedTimezone;
+    },
+  },
+}
+</script>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
+@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
+</style>
diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.html b/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/28.2.3/tailwind.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.js b/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.js
@@ -0,0 +1,100 @@
+
+import Vue from "vue";
+import { GridPlugin } from "@syncfusion/ej2-vue-grids";
+import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
+import { CheckBoxPlugin } from "@syncfusion/ej2-vue-buttons";
+import { DataManager, WebApiAdaptor, DataUtil } from "@syncfusion/ej2-data";
+
+Vue.use(GridPlugin);
+Vue.use(DropDownListPlugin);
+Vue.use(CheckBoxPlugin);
+let SERVICE_URI = "https://services.syncfusion.com/vue/production/";
+
+new Vue(
+  {
+    el: '#app',
+    template: `
+    <div id="app">
+      <div style="display: flex; align-items: center; margin-bottom: 10px">
+        <label style="margin-right: 10px">Select Timezone:</label>
+        <ejs-dropdownlist
+          id="timezone"
+          width="150px"
+          :dataSource="timeZones"
+          :fields="field"
+          v-model="selectedTimezone"
+          :change="onTimezoneChange"
+        ></ejs-dropdownlist>
+      </div>
+      <div style="margin-bottom: 10px">
+        <ejs-checkbox
+          label="Prevent Timezone Conversion"
+          ref="timezoneCheckboxRef"
+          :change="onCheckboxChange"
+        ></ejs-checkbox>
+      </div>
+      <ejs-grid ref="grid" :dataSource="data" :height="315" :load="load">
+        <e-columns>
+          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
+          <e-column field="CustomerID" headerText="Customer ID" width="140"></e-column>
+          <e-column field="Freight" headerText="Freight" textAlign="Right" format="C" width="120"></e-column>
+          <e-column field="OrderDate" headerText="Order Date" textAlign="Right" width="140"></e-column>
+        </e-columns>
+      </ejs-grid>
+    </div>  `,
+    data() {
+      return {
+        data: new DataManager({
+          url: SERVICE_URI + 'api/Orders',
+          adaptor: new WebApiAdaptor()
+        }),
+        selectedTimezone: -12,
+        field: { text: "text", value: "value" },
+        timeZones: [
+          { value: -12, text: "-12:00 UTC" },
+          { value: -11, text: "-11:00 UTC" },
+          { value: -10, text: "-10:00 UTC" },
+          { value: -9, text: "-09:00 UTC" },
+          { value: -8, text: "-08:00 UTC" },
+          { value: -7, text: "-07:00 UTC" },
+          { value: -6, text: "-06:00 UTC" },
+          { value: -5, text: "-05:00 UTC" },
+          { value: -4, text: "-04:00 UTC" },
+          { value: -3, text: "-03:00 UTC" },
+          { value: -2, text: "-02:00 UTC" },
+          { value: -1, text: "-01:00 UTC" },
+          { value: 0, text: "+00:00 UTC" },
+          { value: 1, text: "+01:00 UTC" },
+          { value: 2, text: "+02:00 UTC" },
+          { value: 3, text: "+03:00 UTC" },
+          { value: 4, text: "+04:00 UTC" },
+          { value: 5, text: "+05:00 UTC" },
+          { value: 5.5, text: "+05:30 UTC" },
+          { value: 6, text: "+06:00 UTC" },
+          { value: 7, text: "+07:00 UTC" },
+          { value: 8, text: "+08:00 UTC" },
+          { value: 9, text: "+09:00 UTC" },
+          { value: 10, text: "+10:00 UTC" },
+          { value: 11, text: "+11:00 UTC" },
+          { value: 12, text: "+12:00 UTC" },
+          { value: 13, text: "+13:00 UTC" },
+          { value: 14, text: "+14:00 UTC" },
+        ],
+      };
+    },
+    methods: {
+      onTimezoneChange(args) {
+        this.selectedTimezone = Number(args.value);
+        this.$refs.grid.ej2Instances.freezeRefresh();
+      },
+      onCheckboxChange(args) {
+        this.$refs.grid.ej2Instances.freezeRefresh();
+      },
+      load(args) {
+        DataUtil.serverTimezoneOffset = this.$refs.timezoneCheckboxRef.ej2Instances.checked
+          ? 0
+          : this.selectedTimezone;
+      },
+    }
+  }
+);
diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/systemjs.config.js b/ej2-vue/code-snippet/grid/databind/databinding-timezone/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/28.2.3/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",  
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+
+    }
+});
+
+System.import('index.js');