Excel like filter in Vue Grid component

29 Mar 20232 minutes to read

You can enable Excel like filter by defining. filterSettings.type as Excel.The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.

<template>
  <div id="app">
    <ejs-grid ref="Grid" :dataSource="data" :allowFiltering="true" :filterSettings="filterOptions" height="273px">
      <e-columns>
        <e-column field="OrderID" headerText="ID" width="80" isPrimaryKey="true"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="120" format="yMd"><e-column>
        <e-column field="ShipName" headerText="ShipName" width="120"></e-column>
        <e-column field="ShipCity" headerText="ShipCity" width="120"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
     filterOptions: { type: "Excel" },
    };
  },
  methods: {
  },
  provide: {
    grid: [Filter],
  },
};
</script>

<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style>

  • By default, while opening the excel/checkbox filter in the Grid, the filter dialog will get and display the distinct data from the first 1000 records bound to the Grid to optimize performance. The remaining records will be returned as a result of the search option of the filter dialog.
  • However, we can increase the excel/checkbox filter count by modifying the filterChoiceCount argument value(as per our need) in the actionBegin event when the requestType is filterchoicerequest or filtersearchbegin. This is demonstrated in the below code snippet,
  methods: {
    actionBegin(args) {
      if (args.requestType === "filterchoicerequest" || args.requestType ==="filtersearchbegin" ) {
        args.filterChoiceCount = 3000;
      }
    },
  },

See also