syncfusion-content · SyncfusionBuild · Mar 16, 2025 · Mar 15, 2025
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
@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <ejs-grid ref="grid" :dataSource="data" :allowFiltering='true' :pageSettings='pageSettings' :allowSorting="true" :filterSettings="filterOptions" height="200px" :actionBegin="actionBegin">
+      <e-columns>
+        <e-column field="OrderID" headerText="Order ID" width="80" textAlign="Right"></e-column>
+        <e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
+        <e-column field="Freight" headerText="Freight" width="80"></e-column>
+        <e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+
+<script setup>
+import { provide } from "vue";
+import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Filter, Page } from "@syncfusion/ej2-vue-grids";
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+import { data } from './datasource.js';
+provide('grid', [Filter, Page]);
+
+const filterOptions = { type: "Excel" };
+const pageSettings = { pageSize: 12 };
+const hostUrl= "https://services.syncfusion.com/vue/production";
+const actionBegin= function(args) {
+      if (args.requestType === "filterBeforeOpen") {
+        args.filterModel.options.dataSource = new DataManager({
+          url: this.hostUrl + 'api/Orders',
+          adaptor: new WebApiAdaptor(),
+        });
+      }
+    };
+
+</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/filter/excelfilter-custom-datasource/app.vue b/ej2-vue/code-snippet/grid/filter/excelfilter-custom-datasource/app.vue
@@ -0,0 +1,59 @@
+<template>
+  <div id="app">
+    <ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :allowFiltering="true" :filterSettings="filterOptions" height="200px" :actionBegin="actionBegin">
+      <e-columns>
+        <e-column field="OrderID" headerText="Order ID" width="80" textAlign="Right></e-column>
+        <e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
+        <e-column field="Freight" headerText="Freight" width="80"></e-column>
+        <e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+<script>
+
+import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Page } from "@syncfusion/ej2-vue-grids";
+import { data } from './datasource.js';
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+export default {
+name: "App",
+components: {
+"ejs-grid":GridComponent,
+"e-columns":ColumnsDirective,
+"e-column":ColumnDirective,
+},
+  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],
+  },
+};
+</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/filter/excelfilter-custom-datasource/datasource.js 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
+        }];
+});
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
@@ -0,0 +1,19 @@
+
+<!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" />
+    <script src="systemjs.config.js"></script>
+</head>
+<body>
+    <div id='app'>Loading....</div>
+</body>
+</html>
+
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
@@ -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: `
+  <div id="app">
+    <ejs-grid ref="grid" :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :allowFiltering="true" :filterSettings="filterOptions" height="200px" :actionBegin="actionBegin">
+      <e-columns>
+        <e-column field="OrderID" headerText="Order ID" width="80" textAlign="Right"></e-column>
+        <e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
+        <e-column field="Freight" headerText="Freight" width="80"></e-column>
+        <e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>`,
+
+  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],
+  },
+
+});
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
@@ -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');
diff --git 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