From 4fb0464d030c2c1e1336ed1befed98b78ed63f56 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sun, 16 Mar 2025 04:55:37 +0530 Subject: [PATCH] Integrated latest changes at 03-16-2025 4:30:10 AM --- .../app-composition.vue | 45 +++++++++++ .../excelfilter-custom-datasource/app.vue | 59 ++++++++++++++ .../datasource.js | 80 +++++++++++++++++++ .../excelfilter-custom-datasource/index.html | 19 +++++ .../excelfilter-custom-datasource/index.js | 44 ++++++++++ .../systemjs.config.js | 40 ++++++++++ ej2-vue/grid/filtering/excel-like-filter.md | 16 ++++ 7 files changed, 303 insertions(+) create mode 100644 ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app.vue create mode 100644 ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/datasource.js create mode 100644 ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.html create mode 100644 ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.js create mode 100644 ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/systemjs.config.js diff --git a/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue new file mode 100644 index 000000000..93207ffa1 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue @@ -0,0 +1,45 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app.vue b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app.vue new file mode 100644 index 000000000..7d4bddcd4 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app.vue @@ -0,0 +1,59 @@ + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/datasource.js b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/datasource.js new file mode 100644 index 000000000..fd2fbc92d --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/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), + 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), + 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), + 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: 'VICTE', EmployeeID: 3, OrderDate: 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 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + 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), + 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), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + 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: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + 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: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + 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), + 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: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + 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: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + 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/filter/excelfilter-custom-datasource/index.html b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.html new file mode 100644 index 000000000..f4fa30dbd --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.html @@ -0,0 +1,19 @@ + + + + + + EJ2 Vue Sample + + + + + + + + + +
Loading....
+ + + diff --git a/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.js b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.js new file mode 100644 index 000000000..d17cf62d3 --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.js @@ -0,0 +1,44 @@ + +import Vue from "vue"; +import { GridPlugin, Filter, Page } from "@syncfusion/ej2-vue-grids"; +import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; +import { data } from './datasource.js' +Vue.use(GridPlugin); + +new Vue({ + el: '#app', + template: ` +
+ + + + + + + + +
`, + + data() { + return { + data: data, + pageSettings: { pageSize: 12 }, + filterOptions: { type: "Excel" }, + hostUrl: 'https://services.syncfusion.com/vue/production/' + }; + }, + methods: { + actionBegin(args) { + if (args.requestType === "filterBeforeOpen") { + args.filterModel.options.dataSource = new DataManager({ + url: this.hostUrl + 'api/Orders', + adaptor: new WebApiAdaptor(), + }); + } + } + }, + provide: { + grid: [Filter, Page], + }, + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/systemjs.config.js b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/systemjs.config.js new file mode 100644 index 000000000..f9a0e89dc --- /dev/null +++ b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/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/filtering/excel-like-filter.md b/ej2-vue/grid/filtering/excel-like-filter.md index 3e5480e77..c88e7668e 100644 --- a/ej2-vue/grid/filtering/excel-like-filter.md +++ b/ej2-vue/grid/filtering/excel-like-filter.md @@ -395,6 +395,22 @@ The following example demonstrates how to remove the context menu option in the {% previewsample "page.domainurl/code-snippet/grid/filter/excel-filter-cs6" %} +## Bind custom remote datasource for excel/checkbox filtering + +The Syncfusion Vue Grid allows you to dynamically change the filter data source for the Excel or checkbox filter module using custom remote data as well. This can be done by either assigning a custom remote [DataManager](https://ej2.syncfusion.com/vue/documentation/data/vue-3-getting-started) as the [dataSource](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#datasource) or by fetching the data initially and storing it in a global variable. This data can then be bound directly to the filter module's `dataSource` in the [actionBegin](https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin) event for the `filterBeforeOpen` [requestType](https://ej2.syncfusion.com/vue/documentation/api/grid/filterEventArgs/#requesttype), as detailed in our [knowledge base](https://support.syncfusion.com/kb/article/10065/how-to-change-the-data-source-for-checkbox-filter-popup-in-grid). + +The following example demonstrates how to dynamically change the remote custom data source for all columns in the Excel or checkbox filter dialog using a `DataManager` with `WebApiAdaptor`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/filter/excelfilter-custom-datasource/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/filter/excel-filter-cs6" %} ## Hide sorting option in filter dialog