From 36102795b0c5922aecda8ec39bf2f9642d79067d Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 21 Mar 2025 08:16:14 +0530 Subject: [PATCH] Integrated latest changes at 03-21-2025 4:33:29 AM --- .../databinding-timezone/app-composition.vue | 104 ++++++++++++++++ .../databind/databinding-timezone/app.vue | 115 ++++++++++++++++++ .../databind/databinding-timezone/index.html | 23 ++++ .../databind/databinding-timezone/index.js | 100 +++++++++++++++ .../databinding-timezone/systemjs.config.js | 44 +++++++ .../app-composition.vue | 82 +++++++++++++ .../grid/excel/excel-export-show-hide/app.vue | 97 +++++++++++++++ .../excel-export-show-hide/datasource.js | 80 ++++++++++++ .../excel/excel-export-show-hide/index.html | 22 ++++ .../excel/excel-export-show-hide/index.js | 84 +++++++++++++ .../excel-export-show-hide/systemjs.config.js | 40 ++++++ .../filter/filter-enum/app-composition.vue | 56 +++++++++ .../grid/filter/filter-enum/app.vue | 73 +++++++++++ .../grid/filter/filter-enum/datasource.js | 82 +++++++++++++ .../grid/filter/filter-enum/index.css | 2 + .../grid/filter/filter-enum/index.html | 23 ++++ .../grid/filter/filter-enum/index.js | 61 ++++++++++ .../filter/filter-enum/systemjs.config.js | 41 +++++++ .../pdf-export-show-hide/app-composition.vue | 82 +++++++++++++ .../grid/pdf/pdf-export-show-hide/app.vue | 97 +++++++++++++++ .../pdf/pdf-export-show-hide/datasource.js | 80 ++++++++++++ .../grid/pdf/pdf-export-show-hide/index.html | 22 ++++ .../grid/pdf/pdf-export-show-hide/index.js | 84 +++++++++++++ .../pdf-export-show-hide/systemjs.config.js | 40 ++++++ ej2-vue/grid/data-binding/data-binding.md | 21 +++- .../grid/excel-export/excel-export-options.md | 27 ++++ ej2-vue/grid/filtering/filtering.md | 27 ++++ ej2-vue/grid/pdf-export/pdf-export-options.md | 27 ++++ 28 files changed, 1635 insertions(+), 1 deletion(-) create mode 100644 ej2-vue/code-snippet/grid/databind/databinding-timezone/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/databind/databinding-timezone/app.vue create mode 100644 ej2-vue/code-snippet/grid/databind/databinding-timezone/index.html create mode 100644 ej2-vue/code-snippet/grid/databind/databinding-timezone/index.js create mode 100644 ej2-vue/code-snippet/grid/databind/databinding-timezone/systemjs.config.js create mode 100644 ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app.vue create mode 100644 ej2-vue/code-snippet/grid/excel/excel-export-show-hide/datasource.js create mode 100644 ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.html create mode 100644 ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.js create mode 100644 ej2-vue/code-snippet/grid/excel/excel-export-show-hide/systemjs.config.js create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/app.vue create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/datasource.js create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/index.css create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/index.html create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/index.js create mode 100644 ej2-vue/code-snippet/grid/filter/filter-enum/systemjs.config.js create mode 100644 ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app.vue create mode 100644 ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/datasource.js create mode 100644 ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.html create mode 100644 ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.js create mode 100644 ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/systemjs.config.js 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 new file mode 100644 index 000000000..e248d4710 --- /dev/null +++ b/ej2-vue/code-snippet/grid/databind/databinding-timezone/app-composition.vue @@ -0,0 +1,104 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/app.vue b/ej2-vue/code-snippet/grid/databind/databinding-timezone/app.vue new file mode 100644 index 000000000..669bfbcf3 --- /dev/null +++ b/ej2-vue/code-snippet/grid/databind/databinding-timezone/app.vue @@ -0,0 +1,115 @@ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.html b/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.html new file mode 100644 index 000000000..45dc1b06b --- /dev/null +++ b/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + + diff --git a/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.js b/ej2-vue/code-snippet/grid/databind/databinding-timezone/index.js new file mode 100644 index 000000000..9f3d32ae6 --- /dev/null +++ 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: ` +
+
+ + +
+
+ +
+ + + + + + + + +
`, + 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; + }, + } + } +); \ No newline at end of file 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 new file mode 100644 index 000000000..c80d23395 --- /dev/null +++ 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'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app-composition.vue b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app-composition.vue new file mode 100644 index 000000000..233b66e2e --- /dev/null +++ b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app-composition.vue @@ -0,0 +1,82 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app.vue b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app.vue new file mode 100644 index 000000000..f82dc0781 --- /dev/null +++ b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/app.vue @@ -0,0 +1,97 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/datasource.js b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/datasource.js new file mode 100644 index 000000000..d5ffb317a --- /dev/null +++ b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/datasource.js @@ -0,0 +1,80 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8379738e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8377146e5), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: new Date(8377146e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8376282e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8375418e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8374554e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(837369e6), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8370234e5), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(836937e6), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8368506e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(836505e6), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8364186e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.html b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.html new file mode 100644 index 000000000..d6dd9903e --- /dev/null +++ b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.html @@ -0,0 +1,22 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + +
Loading....
+ + + + diff --git a/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.js b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.js new file mode 100644 index 000000000..e3df0c08d --- /dev/null +++ b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/index.js @@ -0,0 +1,84 @@ + +import Vue from "vue"; +import { GridPlugin, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids"; +import { data } from './datasource.js'; + +Vue.use(GridPlugin); + +new Vue({ + el: '#app', + template: ` +
+ + + + + + + +
`, + + data() { + return { + data: data, + toolbarOptions: ['ExcelExport'], + orderColumns: [{ + field: 'OrderDate', + headerText: 'Order Date', + format: 'yMd', + width: 130, + textAlign: 'Right', + minWidth: 10, + }, + { + field: 'Freight', + headerText: 'Freight ($)', + width: 120, + format: 'C1', + textAlign: 'Right', + minWidth: 10, + }], + shipColumns: [ + { + field: 'ShippedDate', + headerText: 'Shipped Date', + format: 'yMd', + textAlign: 'Right', + width: 150, + minWidth: 10, + }, + { + field: 'ShipCountry', + headerText: 'Ship Country', + width: 150, + minWidth: 10, + }, + { + field: 'ShipName', + headerText: 'Ship Name', + width: 150, + minWidth: 10, + visible:false + }, + ] + }; + }, + methods: { + toolbarClick: function(args) { + if (args.item.id === 'Grid_excelexport') { + this.$refs.grid.ej2Instances.columns[1].columns[0].visible = false; + this.$refs.grid.ej2Instances.columns[2].columns[2].visible = true; + this.$refs.grid.excelExport(); + } + }, + excelExportComplete: function(args) { + this.$refs.grid.ej2Instances.columns[1].columns[0].visible = true; + this.$refs.grid.ej2Instances.columns[2].columns[2].visible = false; + } + }, + provide: { + grid: [Toolbar, ExcelExport] + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/systemjs.config.js b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/systemjs.config.js new file mode 100644 index 000000000..f9a0e89dc --- /dev/null +++ b/ej2-vue/code-snippet/grid/excel/excel-export-show-hide/systemjs.config.js @@ -0,0 +1,40 @@ +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-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", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/app-composition.vue b/ej2-vue/code-snippet/grid/filter/filter-enum/app-composition.vue new file mode 100644 index 000000000..e322e0bf2 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/app-composition.vue @@ -0,0 +1,56 @@ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/app.vue b/ej2-vue/code-snippet/grid/filter/filter-enum/app.vue new file mode 100644 index 000000000..d2c12b023 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/app.vue @@ -0,0 +1,73 @@ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/datasource.js b/ej2-vue/code-snippet/grid/filter/filter-enum/datasource.js new file mode 100644 index 000000000..f00bdf269 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/datasource.js @@ -0,0 +1,82 @@ + +export const FileType = { + Base: 1, + Replace: 2, + Delta: 3, +}; +export const data = [ +{ + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, Type: FileType.Base +}, +{ + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8367642e5), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 , Type: FileType.Replace +}, +{ + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 , Type: FileType.Delta +}, +{ + OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 , Type: FileType.Base +}, +{ + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8367642e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, Type: FileType.Replace +}, +{ + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0, Type: FileType.Delta +}, +{ + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1, Type: FileType.Base +}, +{ + OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0, Type: FileType.Replace +}, +{ + OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1, Type: FileType.Delta +}, +{ + OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0, Type: FileType.Base +}, +{ + OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0, Type: FileType.Replace +}, +{ + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1, Type: FileType.Delta +}, +{ + OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0, Type: FileType.Base +}, +{ + OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1, Type: FileType.Replace +}, +{ + OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0, Type: FileType.Delta +}] \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/index.css b/ej2-vue/code-snippet/grid/filter/filter-enum/index.css new file mode 100644 index 000000000..c0f4529d7 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/index.css @@ -0,0 +1,2 @@ + + diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/index.html b/ej2-vue/code-snippet/grid/filter/filter-enum/index.html new file mode 100644 index 000000000..45dc1b06b --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + + diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/index.js b/ej2-vue/code-snippet/grid/filter/filter-enum/index.js new file mode 100644 index 000000000..0c5acf7c8 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/index.js @@ -0,0 +1,61 @@ + +import Vue from "vue"; +import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; +import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; +import { data, FileType } from './datasource.js'; + +Vue.use(GridPlugin); +Vue.use(DropDownListPlugin); + +new Vue( + { + el: '#app', + template: ` +
+ + + + + + + + + + +
`, + + data() { + return { + data: data, + fields: { text: "Type", value: "Type" }, + filterDropData: [ + { Type: 'All' }, + { Type: 'Base' }, + { Type: 'Replace' }, + { Type: 'Delta' }, + ] + } + }, + methods: { + onTypeFilterChange: function (args) { + if (this.$refs.grid) { + if (args.value === "All") { + this.$refs.grid.clearFiltering(); + } else { + this.$refs.grid.filterByColumn("Type", "contains", FileType[args.value]); + } + } + } + }, + provide: { + grid: [Filter] + } + } +); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/filter-enum/systemjs.config.js b/ej2-vue/code-snippet/grid/filter/filter-enum/systemjs.config.js new file mode 100644 index 000000000..4537ee69d --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/filter-enum/systemjs.config.js @@ -0,0 +1,41 @@ +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-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-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app-composition.vue b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app-composition.vue new file mode 100644 index 000000000..5163dd832 --- /dev/null +++ b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app-composition.vue @@ -0,0 +1,82 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app.vue b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app.vue new file mode 100644 index 000000000..316d28507 --- /dev/null +++ b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/app.vue @@ -0,0 +1,97 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/datasource.js b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/datasource.js new file mode 100644 index 000000000..d5ffb317a --- /dev/null +++ b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/datasource.js @@ -0,0 +1,80 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8379738e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8377146e5), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: new Date(8377146e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8376282e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8375418e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8374554e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(837369e6), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8370234e5), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(836937e6), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8368506e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(836505e6), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8364186e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.html b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.html new file mode 100644 index 000000000..d6dd9903e --- /dev/null +++ b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.html @@ -0,0 +1,22 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + +
Loading....
+ + + + diff --git a/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.js b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.js new file mode 100644 index 000000000..92f37dc03 --- /dev/null +++ b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/index.js @@ -0,0 +1,84 @@ + +import Vue from "vue"; +import { GridPlugin, Toolbar, PdfExport } from "@syncfusion/ej2-vue-grids"; +import { data } from './datasource.js'; + +Vue.use(GridPlugin); + +new Vue({ + el: '#app', + template: ` +
+ + + + + + + +
`, + + data() { + return { + data: data, + toolbarOptions: ['PdfExport'], + orderColumns: [{ + field: 'OrderDate', + headerText: 'Order Date', + format: 'yMd', + width: 130, + textAlign: 'Right', + minWidth: 10, + }, + { + field: 'Freight', + headerText: 'Freight ($)', + width: 120, + format: 'C1', + textAlign: 'Right', + minWidth: 10, + }], + shipColumns: [ + { + field: 'ShippedDate', + headerText: 'Shipped Date', + format: 'yMd', + textAlign: 'Right', + width: 150, + minWidth: 10, + }, + { + field: 'ShipCountry', + headerText: 'Ship Country', + width: 150, + minWidth: 10, + }, + { + field: 'ShipName', + headerText: 'Ship Name', + width: 150, + minWidth: 10, + visible:false + }, + ] + }; + }, + methods: { + toolbarClick: function(args) { + if (args.item.id === 'Grid_pdfexport') { + this.$refs.grid.ej2Instances.columns[1].columns[0].visible = false; + this.$refs.grid.ej2Instances.columns[2].columns[2].visible = true; + this.$refs.grid.pdfExport(); + } + }, + pdfExportComplete: function(args) { + this.$refs.grid.ej2Instances.columns[1].columns[0].visible = true; + this.$refs.grid.ej2Instances.columns[2].columns[2].visible = false; + } + }, + provide: { + grid: [Toolbar, PdfExport] + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/systemjs.config.js b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/systemjs.config.js new file mode 100644 index 000000000..f9a0e89dc --- /dev/null +++ b/ej2-vue/code-snippet/grid/pdf/pdf-export-show-hide/systemjs.config.js @@ -0,0 +1,40 @@ +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-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", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/grid/data-binding/data-binding.md b/ej2-vue/grid/data-binding/data-binding.md index 01cb250ad..69ae65348 100644 --- a/ej2-vue/grid/data-binding/data-binding.md +++ b/ej2-vue/grid/data-binding/data-binding.md @@ -183,4 +183,23 @@ The following code demonstrates, how to use the `changeDataSource` method to bin ## See also * [Binding a firebase data source to Grid using vueFire2](https://www.syncfusion.com/blogs/post/binding-a-firebase-data-source-to-grid-using-vuefire2.aspx) -* [How to bind SQL Server data in vue DataGrid using SqlClient data provider](https://www.syncfusion.com/kb/11453/how-to-bind-sql-server-data-in-vue-datagrid-using-sqlclient-data-provider) \ No newline at end of file +* [How to bind SQL Server data in vue DataGrid using SqlClient data provider](https://www.syncfusion.com/kb/11453/how-to-bind-sql-server-data-in-vue-datagrid-using-sqlclient-data-provider) + +## Prevent to convert local time zone format for date column + +By default, Syncfusion Vue Grid automatically converts date values to the local time zone of the client system. However, in some scenarios, you may need to display the original date as received from the server without any timezone conversion. + +To prevent timezone conversion for a date column, use the `serverTimezoneOffset` property from `DataUtil`. Setting this property to **0** ensures that dates remain in the original format received from the server without conversion to the local timezone. + +The following example demonstrates how to prevent local time zone conversion for date columns in Grid by using the `DataUtil.serverTimezoneOffset` property: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/databind/databinding-timezone/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/databind/databinding-timezone/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/databind/databinding-timezone" %} \ No newline at end of file diff --git a/ej2-vue/grid/excel-export/excel-export-options.md b/ej2-vue/grid/excel-export/excel-export-options.md index c92efddc3..d838caf91 100644 --- a/ej2-vue/grid/excel-export/excel-export-options.md +++ b/ej2-vue/grid/excel-export/excel-export-options.md @@ -134,6 +134,33 @@ In the following example, the **CustomerID** is initially a hidden column in the {% previewsample "page.domainurl/code-snippet/grid/excel/export-option-cs5" %} +## Show or hide columns while exporting with stacked header + +The Syncfusion Vue Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers. + +To implement the show or hide columns feature during Excel export in the Grid, follow these steps: + +1. Handle the [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclick) event of the Grid. + +2. Update the visibility of the desired columns by setting the [visible](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#visible) property of the column to **true** or **false**. + +3. Export the Grid to Excel document using the [excelExport](https://ej2.syncfusion.com/vue/documentation/api/grid/#excelexport) or [csvExport](https://ej2.syncfusion.com/vue/documentation/api/grid/#csvexport) method. + +4. Handle the [excelExportComplete](https://ej2.syncfusion.com/vue/documentation/api/grid/#excelexportcomplete) event to restore the column visibility to its original state. + +In the following example, the **ShipName** is initially a hidden column in the Grid. However, during the Excel export process, the **ShipName** column is made visible, while the **OrderDate** column is hidden: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/excel/excel-export-show-hide/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/excel/excel-export-show-hide/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/excel/export-option-cs5" %} + ## Enable filtering in the exported excel file The Grid allows you to export data to Excel or CSV with filter options and also export only filtered records. This feature is especially beneficial when you need to share data with others while preserving the ability for them to filter and analyze the data in Excel or CSV. diff --git a/ej2-vue/grid/filtering/filtering.md b/ej2-vue/grid/filtering/filtering.md index 92badd858..a68716657 100644 --- a/ej2-vue/grid/filtering/filtering.md +++ b/ej2-vue/grid/filtering/filtering.md @@ -176,6 +176,33 @@ Consider the following sample where the `ignoreAccent` property is set to true i {% previewsample "page.domainurl/code-snippet/grid/filter/filter-cs5" %} +## Perform ENUM column filtering + +The Syncfusion Vue Grid allows you to filter enum-type data using the [filterTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#filtertemplate) feature. This is particularly useful for filtering predefined values, such as categories or statuses. + +To achieve this functionality: + +1. Render [DropDownList](https://ej2.syncfusion.com/vue/documentation/drop-down-list/getting-started) in the `filterTemplate` for the enum-type column. + +2. Bind the enumerated list data to the column. + +3. Use the [template](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#template) property in the **Type** column to display enum values in a readable format. + +4. In the [change](https://ej2.syncfusion.com/vue/documentation/api/drop-down-list#change) event of the **DropDownList**, dynamically filter the column using the [filterByColumn](https://ej2.syncfusion.com/vue/documentation/api/grid#filterbycolumn) method of the Grid. + +Below is an example demonstrating how to filter enum-type data in a Grid: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/filter/filter-enum/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/filter/filter-enum/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/filter/filter-enum" %} + ## Filtering with case sensitivity The Syncfusion Vue Grid provides the flexibility to enable or disable case sensitivity during filtering. This feature is useful when you want to control whether filtering operations should consider the case of characters. It can be achieved by using the [enableCaseSensitivity](https://ej2.syncfusion.com/vue/documentation/api/grid/filterSettings/#enablecasesensitivity) property within the [filterSettings](https://ej2.syncfusion.com/vue/documentation/api/grid/filterSettings/) of the grid. diff --git a/ej2-vue/grid/pdf-export/pdf-export-options.md b/ej2-vue/grid/pdf-export/pdf-export-options.md index 2fa041853..5bbfdeafb 100644 --- a/ej2-vue/grid/pdf-export/pdf-export-options.md +++ b/ej2-vue/grid/pdf-export/pdf-export-options.md @@ -137,6 +137,33 @@ In the following example, the **CustomerID** is initially a hidden column in the {% previewsample "page.domainurl/code-snippet/grid/pdf/default-cs9" %} +## Show or hide columns while exporting with stacked header + +The Syncfusion Vue Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers. + +To implement the show or hide columns feature during Excel export in the Grid, follow these steps: + +1. Handle the [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclick) event of the Grid. + +2. Update the visibility of the desired columns by setting the [visible](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#visible) property of the column to **true** or **false**. + +3. Export the Grid to PDF document using [pdfExport](https://ej2.syncfusion.com/vue/documentation/api/grid/#pdfexport) method. + +4. Handle the [pdfExportComplete](https://ej2.syncfusion.com/vue/documentation/api/grid/#pdfexportcomplete) event to restore the column visibility to its original state. + +In the following example, the **ShipName** is initially a hidden column in the Grid. However, during the PDF export process, the **ShipName** column is made visible, while the **OrderDate** column is hidden: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/pdf/pdf-export-show-hide/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/pdf/pdf-export-show-hide/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/pdf/pdf-option-cs5" %} + ## Change page orientation The Syncfusion Vue Grid component allows you to change the page orientation of the exported PDF document from the default portrait mode to landscape mode. This feature provides the flexibility to adjust the layout and presentation of the exported PDF according to your needs.