Skip to content

Commit 4fb0464

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 03-16-2025 4:30:10 AM
1 parent 8f3a9f8 commit 4fb0464

File tree

7 files changed

+303
-0
lines changed

7 files changed

+303
-0
lines changed

‎ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div id="app">
3+
<ejs-grid ref="grid" :dataSource="data" :allowFiltering='true' :pageSettings='pageSettings' :allowSorting="true" :filterSettings="filterOptions" height="200px" :actionBegin="actionBegin">
4+
<e-columns>
5+
<e-column field="OrderID" headerText="Order ID" width="80" textAlign="Right"></e-column>
6+
<e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
7+
<e-column field="Freight" headerText="Freight" width="80"></e-column>
8+
<e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"></e-column>
9+
</e-columns>
10+
</ejs-grid>
11+
</div>
12+
</template>
13+
14+
<script setup>
15+
import { provide } from "vue";
16+
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Filter, Page } from "@syncfusion/ej2-vue-grids";
17+
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
18+
import { data } from './datasource.js';
19+
provide('grid', [Filter, Page]);
20+
21+
const filterOptions = { type: "Excel" };
22+
const pageSettings = { pageSize: 12 };
23+
const hostUrl= "https://services.syncfusion.com/vue/production";
24+
const actionBegin= function(args) {
25+
if (args.requestType === "filterBeforeOpen") {
26+
args.filterModel.options.dataSource = new DataManager({
27+
url: this.hostUrl + 'api/Orders',
28+
adaptor: new WebApiAdaptor(),
29+
});
30+
}
31+
};
32+
33+
</script>
34+
35+
<style>
36+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
37+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
38+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
39+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
40+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
41+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
42+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
43+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
44+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
45+
</style>

‎ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div id="app">
3+
<ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :allowFiltering="true" :filterSettings="filterOptions" height="200px" :actionBegin="actionBegin">
4+
<e-columns>
5+
<e-column field="OrderID" headerText="Order ID" width="80" textAlign="Right></e-column>
6+
<e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
7+
<e-column field="Freight" headerText="Freight" width="80"></e-column>
8+
<e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"></e-column>
9+
</e-columns>
10+
</ejs-grid>
11+
</div>
12+
</template>
13+
<script>
14+
15+
import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Page } from "@syncfusion/ej2-vue-grids";
16+
import { data } from './datasource.js';
17+
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
18+
export default {
19+
name: "App",
20+
components: {
21+
"ejs-grid":GridComponent,
22+
"e-columns":ColumnsDirective,
23+
"e-column":ColumnDirective,
24+
},
25+
data() {
26+
return {
27+
data: data,
28+
pageSettings: { pageSize: 12 },
29+
filterOptions: { type: "Excel" },
30+
hostUrl: 'https://services.syncfusion.com/vue/production/'
31+
};
32+
},
33+
methods: {
34+
actionBegin(args) {
35+
if (args.requestType === "filterBeforeOpen") {
36+
args.filterModel.options.dataSource = new DataManager({
37+
url: this.hostUrl + 'api/Orders',
38+
adaptor: new WebApiAdaptor(),
39+
});
40+
}
41+
}
42+
},
43+
provide: {
44+
grid: [Filter, Page],
45+
},
46+
};
47+
</script>
48+
49+
<style>
50+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
51+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
52+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
53+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
54+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
55+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
56+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
57+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
58+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
59+
</style>

‎ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/datasource.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
define(["require", "exports"], function (require, exports) {
2+
"use strict";
3+
Object.defineProperty(exports, "__esModule", { value: true });
4+
exports.data = [
5+
{
6+
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
7+
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
8+
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
9+
},
10+
{
11+
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
12+
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
13+
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
14+
},
15+
{
16+
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
17+
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
18+
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
19+
},
20+
{
21+
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
22+
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
23+
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
24+
},
25+
{
26+
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
27+
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
28+
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
29+
},
30+
{
31+
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
32+
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
33+
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
34+
},
35+
{
36+
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
37+
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
38+
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
39+
},
40+
{
41+
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
42+
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
43+
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
44+
},
45+
{
46+
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
47+
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
48+
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
49+
},
50+
{
51+
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
52+
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
53+
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
54+
},
55+
{
56+
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
57+
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
58+
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
59+
},
60+
{
61+
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
62+
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
63+
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
64+
},
65+
{
66+
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
67+
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
68+
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
69+
},
70+
{
71+
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
72+
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
73+
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
74+
},
75+
{
76+
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
77+
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
78+
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
79+
}];
80+
});

‎ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
6+
<title>EJ2 Vue Sample</title>
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<meta name="description" content="Typescript UI Controls" />
10+
<meta name="author" content="Syncfusion" />
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
12+
<link href="https://cdn.syncfusion.com/ej2/28.2.3/tailwind.css" rel="stylesheet" />
13+
<script src="systemjs.config.js"></script>
14+
</head>
15+
<body>
16+
<div id='app'>Loading....</div>
17+
</body>
18+
</html>
19+

‎ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
import Vue from "vue";
3+
import { GridPlugin, Filter, Page } from "@syncfusion/ej2-vue-grids";
4+
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
5+
import { data } from './datasource.js'
6+
Vue.use(GridPlugin);
7+
8+
new Vue({
9+
el: '#app',
10+
template: `
11+
<div id="app">
12+
<ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :allowFiltering="true" :filterSettings="filterOptions" height="200px" :actionBegin="actionBegin">
13+
<e-columns>
14+
<e-column field="OrderID" headerText="Order ID" width="80" textAlign="Right"></e-column>
15+
<e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
16+
<e-column field="Freight" headerText="Freight" width="80"></e-column>
17+
<e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"></e-column>
18+
</e-columns>
19+
</ejs-grid>
20+
</div>`,
21+
22+
data() {
23+
return {
24+
data: data,
25+
pageSettings: { pageSize: 12 },
26+
filterOptions: { type: "Excel" },
27+
hostUrl: 'https://services.syncfusion.com/vue/production/'
28+
};
29+
},
30+
methods: {
31+
actionBegin(args) {
32+
if (args.requestType === "filterBeforeOpen") {
33+
args.filterModel.options.dataSource = new DataManager({
34+
url: this.hostUrl + 'api/Orders',
35+
adaptor: new WebApiAdaptor(),
36+
});
37+
}
38+
}
39+
},
40+
provide: {
41+
grid: [Filter, Page],
42+
},
43+
44+
});

‎ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/systemjs.config.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/28.2.3/"
14+
},
15+
map: {
16+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
20+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
21+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
22+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
23+
"@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
24+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
25+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
28+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
29+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
30+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
31+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", 
32+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
33+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
34+
35+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
36+
"@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js",
37+
}
38+
});
39+
40+
System.import('index.js');

‎ej2-vue/grid/filtering/excel-like-filter.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,22 @@ The following example demonstrates how to remove the context menu option in the
395395

396396
{% previewsample "page.domainurl/code-snippet/grid/filter/excel-filter-cs6" %}
397397

398+
## Bind custom remote datasource for excel/checkbox filtering
399+
400+
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).
401+
402+
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`.
403+
404+
{% tabs %}
405+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
406+
{% include code-snippet/grid/filter/excelfilter-custom-datasource/app-composition.vue %}
407+
{% endhighlight %}
408+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
409+
{% include code-snippet/grid/filter/excelfilter-custom-datasource/app.vue %}
410+
{% endhighlight %}
411+
{% endtabs %}
412+
413+
{% previewsample "page.domainurl/code-snippet/grid/filter/excel-filter-cs6" %}
398414

399415
## Hide sorting option in filter dialog
400416

0 commit comments

Comments
 (0)