Filter bar in Vue Grid component
28 Jun 202424 minutes to read
The filter bar feature provides a user-friendly way to filter data in the Syncfusion Vue Grid. It displays an input field for each column, allowing you to enter filter criteria and instantly see the filtered results.
By defining the allowFiltering to true, then filter bar row will be rendered next to header which allows you to filter data. You can filter the records with different expressions depending upon the column type.
Filter bar expressions:
You can enter the following filter expressions(operators) manually in the filter bar.
Expression | Example | Description | Column Type |
---|---|---|---|
= | =value | equal | Number |
!= | !=value | notequal | Number |
> | >value | greaterthan | Number |
< | <value | lessthan | Number |
>= | >=value | greaterthanorequal | Number |
<= | <=value | lessthanorequal | Number |
* | *value | startswith | String |
% | %value | endswith | String |
N/A | N/A | Always equal operator will be used for Date filter | Date |
N/A | N/A | Always equal operator will be used for Boolean filter | Boolean |
The following example demonstrates how to activate default filtering in the grid.
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></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 } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const filterOptions = { type: "FilterBar" };
provide('grid', [Filter]);
</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>
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
filterOptions: {
type: 'FilterBar'
}
};
},
provide: {
grid: [Filter]
}
}
</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>
To enable or dynamically switch the filter type, you must set the filterSettings.type as FilterBar.
Filter bar modes
The Syncfusion Vue Grid component refers to two different ways in which the grid’s filter bar can operate when filtering criteria are applied. These modes, “OnEnter Mode” and “Immediate Mode,” offer users different experiences and behaviors when interacting with the filter bar.
OnEnter Mode:
By settings filterSettings.mode as OnEnter, the filter bar captures the filter criteria entered but doesn’t initiate filtering until the Enter key is pressed. This allows multiple criteria modifications without triggering immediate filtering actions.
Immediate Mode:
By settings filterSettings.mode as Immediate, the filter bar instantly applies filtering as filter criteria are entered. Filtering actions take place as soon as criteria are input or modified, providing real-time previews of filtering results.
<template>
<div id="app">
<div style="display: inline-block;">
<label style="padding: 10px 10px 12px 0">Select Filter Mode: </label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' width="150" :dataSource="filterModesData"
:change="onModeChange"></ejs-dropdownlist>
</div>
<ejs-grid style='margin-top:5px' :dataSource='data' :allowFiltering='true' :filterSettings='filterSettings'
allowPaging='true' :pageSettings="pageSettings" height='180px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Page } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js'
export default {
name: "App",
components: {
"ejs-dropdownlist":DropDownListComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
pageSettings: { pageSize: 5 },
filterSettings: {
type: 'FilterBar'
},
filterModesData:['Immediate', 'OnEnter'],
};
},
methods: {
onModeChange: function (args) {
this.filterSettings = {
mode: args.value,
}
}
},
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>
Display filter text in pager
The Syncfusion Vue Grid component provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides you with a clear understanding of the applied filters and the criteria used for filtering.
To enable the display of filter text within the pager, you should set the showFilterBarStatus property within the filterSettings configuration.
<template>
<div id="app">
<div style="display: flex;">
<label style="margin-right:5px">
<b> Show filter bar status </b>
</label>
<ejs-switch id="switch" :checked="true" :change="onChange"></ejs-switch>
</div>
<ejs-grid style='margin-top:5px' :dataSource='data' :allowFiltering='true' :filterSettings='filterSettings'
allowPaging='true' :pageSettings="pageSettings" height='180px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></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 { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
import { ref } from 'vue';
provide('grid', [Filter, Page]);
let filterSettings= ref({ type:'FilterBar'});
const pageSettings= { pageSize: 5 };
const onChange = function (args) {
filterSettings.value = {
showFilterBarStatus: args.checked,
}
}
</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>
<template>
<div id="app">
<div style="display: flex;">
<label style="margin-right:5px">
<b> Show filter bar status </b>
</label>
<ejs-switch id="switch" :checked="true" :change="onChange"></ejs-switch>
</div>
<ejs-grid style='margin-top:5px' :dataSource='data' :allowFiltering='true' :filterSettings='filterSettings'
allowPaging='true' :pageSettings="pageSettings" height='180px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Page } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js'
export default {
name: "App",
components: {
"ejs-switch":SwitchComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
pageSettings: { pageSize: 5 },
filterSettings: {
type: 'FilterBar'
}
};
},
methods: {
onChange: function (args) {
this.filterSettings = {
showFilterBarStatus: args.checked,
}
}
},
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>
Show or hide filter bar operator in filter bar cell
In the Syncfusion Vue Grid component, you have the ability to modify the filter operator for a column directly within the user interface during the filtering process through the filter bar cell. For instance, the default operator for filtering string-type columns in the filter bar is “startswith”. Now, you can customize the default operator for a specific column using the filter operator feature.
To achieve this functionality, you can enable the showFilterBarOperator property within the filterSettings.
<template>
<div id="app">
<div style="display: flex;">
<label style="margin-right:5px">
<b> Show filter bar operator </b>
</label>
<ejs-switch :change="onChange"></ejs-switch>
</div>
<ejs-grid style='margin-top:5px' :dataSource='data' :allowFiltering='true' :filterSettings='filterSettings'
allowPaging='true' :pageSettings="pageSettings" height='180px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></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 { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
import { ref } from 'vue';
provide('grid', [Filter, Page]);
let filterSettings= ref({ type:'FilterBar'});
const pageSettings= { pageSize: 5 };
const onChange = function (args) {
filterSettings.value = {
showFilterBarOperator: args.checked,
}
}
</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>
<template>
<div id="app">
<div style="display: flex;">
<label style="margin-right:5px">
<b> Show filter bar operator </b>
</label>
<ejs-switch :change="onChange"></ejs-switch>
</div>
<ejs-grid style='margin-top:5px' :dataSource='data' :allowFiltering='true' :filterSettings='filterSettings'
allowPaging='true' :pageSettings="pageSettings" height='180px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Page } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js'
export default {
name: "App",
components: {
"ejs-switch":SwitchComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
pageSettings: { pageSize: 5 },
filterSettings: {
type: 'FilterBar'
}
};
},
methods: {
onChange: function (args) {
this.filterSettings = {
showFilterBarOperator: args.checked,
}
}
},
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>
Prevent filtering for particular column
In the Syncfusion Vue Grid, you can prevent filtering for a specific column by utilizing the allowFiltering property of the column object and setting it to false. This feature is useful when you want to disable filtering options for a particular column.
Here’s an example that demonstrates how to remove the filter bar for the CustomerID column in Syncfusion vue Grid:
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' :allowFiltering='false' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></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 } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const filterOptions = { type: "FilterBar" };
provide('grid', [Filter]);
</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>
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' :allowFiltering='false' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
filterOptions: {
type: 'FilterBar'
}
};
},
provide: {
grid: [Filter]
}
}
</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>
Hide filter bar for template column
By default, the filter bar is set to a disabled mode for template columns in the grid. However, in certain cases, you may want to hide the filter bar for a template column to provide a customized filtering experience.
To hide the filter bar for a template column, you can use the filterTemplate property of the column. This property allows you to define a custom template for the filter bar of a column.
Here’s an example that demonstrates how to hide the filter bar for a template column in the Syncfusion vue Grid:
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px' :load='load'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' :allowFiltering='false' width=120></e-column>
<e-column headerText='Action' width='150' :template="'columnTemplate'"></e-column>
</e-columns>
<template v-slot:columnTemplate>
<div>
<ejs-button>Custom Action</ejs-button>
</div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
provide('grid', [Filter]);
const filterOptions = { type: "FilterBar" };
const grid = ref(null);
const load = function() {
grid.value.ej2Instances.columns[2].filterTemplate = '<span></span>';
}
</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>
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px' :load='load'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' :allowFiltering='false' width=120></e-column>
<e-column headerText='Action' width='150' :template="'columnTemplate'"></e-column>
</e-columns>
<template v-slot:columnTemplate>
<div>
<ejs-button>Custom Action</ejs-button>
</div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-button":ButtonComponent,
},
data: () => {
return {
data: data,
};
},
methods: {
load() {
this.$refs.grid.$el.ej2_instances[0].columns[2].filterTemplate='<span></span>';
},
},
provide: {
grid: [Filter]
}
}
</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>
Filter bar template with custom component
The filterBarTemplate feature in the Syncfusion Vue Grid allows you to customize the components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows you to use various components, such as datepicker, numerictextbox, combobox, and multiselect, within the filter bar based on your specific requirements.
To utilize this feature, you can define a custom template for the filter bar by setting the filterBarTemplate
property of a column in your Vue application:
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" :allowFiltering="true" height="273px">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120" :filterBarTemplate="templateOptionsDropDown"></e-column>
<e-column field="Freight" headerText="Freight" width="100" format="C2" textAlign="Right" :filterBarTemplate="templateOptionsNumericTextBox"></e-column>
<e-column field="OrderDate" headerText="Order Date" width="120" format="yMd" type="date" :filterBarTemplate="templateOptionsDatePicker"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="120" :filterBarTemplate="templateOptionsComboBox"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="120" :filterBarTemplate="templateOptionsMultiSelect"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Filter, parentsUntil } from "@syncfusion/ej2-vue-grids";
import { ComboBox, DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { DatePicker } from '@syncfusion/ej2-calendars';
import { DataManager, DataUtil, Predicate, Query } from '@syncfusion/ej2-data';
import { data } from './datasource.js';
const grid = ref(null);
const numericTextBoxRef = ref(null);
const datePickerRef = ref(null);
const comboBoxRef = ref(null);
const multiSelectRef = ref(null);
let shipCityDistinctData = DataUtil.distinct(data, 'ShipCity', true);
let shipCountryDistinctData = DataUtil.distinct(data, 'ShipCountry', true);
const dropdownFunction = (e) => {
if (e.value == 'All') {
grid.value.ej2Instances.removeFilteredColsByField('CustomerID');
} else {
grid.value.ej2Instances.filterByColumn('CustomerID', 'equal', e.value);
}
};
const handleFilterChange = (args) => {
let targetElement = parentsUntil(args.element, 'e-filtertext');
let columnName = targetElement.id.replace('_filterBarcell', '');
if (args.value) {
grid.value.ej2Instances.filterByColumn(columnName, 'equal', args.value);
} else {
grid.value.ej2Instances.removeFilteredColsByField(columnName);
}
};
const multiselectFunction = (args) => {
var selectedValues = args.value;
if (selectedValues.length === 0) {
var OrginalData = new DataManager(data).executeLocal(new Query());
grid.value.ej2Instances.dataSource = OrginalData;
} else {
var predicate = null;
for (let x = 0; x < selectedValues.length; x++) {
if (predicate === null) {
predicate = new Predicate('ShipCountry', 'equal', selectedValues[x]);
} else {
predicate = predicate.or('ShipCountry', 'equal', selectedValues[x]);
}
}
var filteredData = new DataManager(data).executeLocal(new Query().where(predicate));
grid.value.ej2Instances.dataSource = filteredData;
}
};
const templateOptionsDropDown = ref({
create() {
const dropdown = document.createElement('select');
dropdown.id = 'CustomerID';
const option = document.createElement('option');
option.value = 'All';
option.innerText = 'All';
dropdown.appendChild(option);
data.forEach((item) => {
const option = document.createElement('option');
option.value = item.CustomerID;
option.innerText = item.CustomerID;
dropdown.appendChild(option);
});
return dropdown;
},
write() {
const dropDownListObj = new DropDownList({
change: dropdownFunction
});
dropDownListObj.appendTo('#CustomerID');
},
});
const templateOptionsNumericTextBox = ref({
create() {
const input = document.createElement('input');
numericTextBoxRef.value = input;
return input;
},
write() {
const numericTextBox = new NumericTextBox({ format: '00.00', value: 10 });
numericTextBox.appendTo(numericTextBoxRef.value);
},
});
const templateOptionsDatePicker = ref({
create() {
const input = document.createElement('input');
datePickerRef.value = input;
return input;
},
write(args) {
const datePickerObj = new DatePicker({
value: new Date(args.column.field),
change: handleFilterChange,
});
datePickerObj.appendTo(datePickerRef.value);
},
});
const templateOptionsComboBox = ref({
create() {
const comboelement = document.createElement('input');
comboelement.id = 'ShipCity';
comboBoxRef.value = comboelement;
return comboelement;
},
write(args) {
const comboBox = new ComboBox({
value: args.value,
placeholder: 'Select a city',
change: handleFilterChange,
dataSource: shipCityDistinctData.map((item) => item.ShipCity),
});
comboBox.appendTo(comboBoxRef.value);
},
});
const templateOptionsMultiSelect = ref({
create() {
const multiselectelement = document.createElement('input');
multiselectelement.id = 'ShipCountry';
multiSelectRef.value = multiselectelement;
return multiselectelement;
},
write(args) {
const multiselect = new MultiSelect({
value: args.value,
placeholder: 'Select a country',
change: multiselectFunction,
dataSource: shipCountryDistinctData.map((item) => item.ShipCountry),
});
multiselect.appendTo(multiSelectRef.value);
},
});
provide('grid', [Filter]);
</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>
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='data' :allowFiltering='true' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :filterBarTemplate='templateOptionsDropDown'></e-column>
<e-column field="Freight" headerText="Freight" width="100" format="C2" textAlign="Right" :filterBarTemplate="templateOptionsNumericTextBox" />
<e-column field="OrderDate" headerText="Order Date" width="120" format="yMd" type="date" :filterBarTemplate="templateOptionsDatePicker" />
<e-column field="ShipCity" headerText="Ship City" width="120" :filterBarTemplate="templateOptionsComboBox"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="120" :filterBarTemplate="templateOptionsMultiSelect"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Filter } from "@syncfusion/ej2-vue-grids";
import { ComboBox, DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
import { DataManager, DataUtil, Predicate, Query } from '@syncfusion/ej2-data';
import { DatePicker } from '@syncfusion/ej2-calendars';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
templateOptionsDropDown: {
create: function () {
const dropdown = document.createElement('select');
dropdown.id = 'CustomerID';
const option = document.createElement('option');
option.value = 'All';
option.innerText = 'All';
dropdown.appendChild(option);
data.forEach((item) => {
const option = document.createElement('option');
option.value = item.CustomerID;
option.innerText = item.CustomerID;
dropdown.appendChild(option);
});
return dropdown;
},
write: function () {
const dropdownFunction = (e) => {
const gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (e.value === "All") {
gridObj.removeFilteredColsByField("CustomerID");
} else {
gridObj.filterByColumn("CustomerID", "equal", e.value);
}
};
let dropDownList = new DropDownList({
change: dropdownFunction
});
dropDownList.appendTo('#CustomerID');
}
},
templateOptionsNumericTextBox:{
create() {
let numElement = document.createElement('input');
numElement.id = "Freight";
return numElement;
},
write() {
const numericTextBox = new NumericTextBox({ format: '00.00', value: 10 });
numericTextBox.appendTo('#Freight');
},
},
templateOptionsDatePicker: {
create() {
let numElement = document.createElement('input');
numElement.id = "OrderDate";
return numElement;
},
write(args) {
const handleFilterChange = (args) => {
const gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (args.value) {
gridObj.filterByColumn('OrderDate', 'equal', args.value);
} else {
gridObj.removeFilteredColsByField('OrderDate');
}
};
const datePickerObj = new DatePicker({
value: new Date(args.column.field),
change: handleFilterChange,
});
datePickerObj.appendTo('#OrderDate');
},
},
templateOptionsComboBox: {
create() {
const comboelement = document.createElement('input');
comboelement.id = 'ShipCity';
return comboelement;
},
write(args) {
const handleFilterChange = (args) => {
const gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (args.value) {
gridObj.filterByColumn('ShipCity', 'equal', args.value);
} else {
gridObj.removeFilteredColsByField('ShipCity');
}
};
let shipCityDistinctData = DataUtil.distinct(data, 'ShipCity', true);
const comboBox = new ComboBox({
value: args.value,
placeholder: 'Select a city',
change: handleFilterChange,
dataSource: shipCityDistinctData.map((item) => item.ShipCity),
});
comboBox.appendTo('#ShipCity');
},
},
templateOptionsMultiSelect: {
create() {
const multiselectelement = document.createElement('input');
multiselectelement.id = 'ShipCountry';
return multiselectelement;
},
write(args) {
const multiselectFunction = (args) => {
const gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
var selectedValues = args.value;
if (selectedValues.length === 0) {
var OrginalData = new DataManager(data).executeLocal(new Query());
gridObj.dataSource = OrginalData;
} else {
var predicate = null;
for (let x = 0; x < selectedValues.length; x++) {
if (predicate === null) {
predicate = new Predicate('ShipCountry', 'equal', selectedValues[x]);
} else {
predicate = predicate.or('ShipCountry', 'equal', selectedValues[x]);
}
}
var filteredData = new DataManager(data).executeLocal(new Query().where(predicate));
gridObj.dataSource = filteredData;
}
};
let shipCountryDistinctData = DataUtil.distinct(data, 'ShipCountry', true);
const multiselect = new MultiSelect({
value: args.value,
placeholder: 'Select a country',
change: multiselectFunction,
dataSource: shipCountryDistinctData.map((item) => item.ShipCountry),
});
multiselect.appendTo('#ShipCountry');
},
}
};
},
provide: {
grid: [Filter]
}
}
</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>