Filtering API
The DataGrid includes the following API you can use to filter data:
-
filter() / filter(filterExpr)
Gets or sets a filter expression for the grid's dataSource. -
filterValue
A filter expression that is applied with the following UI elements: filter row, header filter, filter builder. -
getCombinedFilter() / getCombinedFilter(returnDataField)
Gets the total filter that includes filters from the UI elements and the filter applied to the dataSource. If you specify thereturnDataFieldparameter, the returned value contains data field names instead of getters. -
clearFilter() / clearFilter(filterName)
Discards all filters applied to the DataGrid. If you specify thefilterNameparameter, this method discards all filters of a specific type.
In this demo, you can use the SelectBox component to filter the grid's dataSource. The "All" item calls the clearFilter() method and the other items call the filter(filterExpr) method.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div>
<div class="left-side">
<div class="logo">
<img :src="'../../../../images/logo-devav.png'">
<img :src="'../../../../images/logo-tasks.png'">
</div>
</div>
<div class="right-side">
<DxSelectBox
:items="statuses"
:value="statuses[0]"
:input-attr="{ 'aria-label': 'Status' }"
@value-changed="onValueChanged"
/>
</div>
<DxDataGrid
id="gridContainer"
ref="dataGridRef"
:data-source="dataSource"
:column-auto-width="true"
:show-borders="true"
>
<DxColumn
:width="80"
data-field="Task_ID"
/>
<DxColumn
data-field="Task_Start_Date"
data-type="date"
caption="Start Date"
/>
<DxColumn
:allow-sorting="false"
data-field="ResponsibleEmployee.Employee_Full_Name"
css-class="employee"
caption="Assigned To"
/>
<DxColumn
:width="350"
data-field="Task_Subject"
caption="Subject"
/>
<DxColumn
data-field="Task_Status"
caption="Status"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {
DxColumn,
DxDataGrid,
} from 'devextreme-vue/data-grid';
import DxSelectBox from 'devextreme-vue/select-box';
import 'devextreme/data/odata/store';
import { ValueChangedEvent } from 'devextreme/ui/select_box';
const dataSource = {
store: {
type: 'odata',
url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks',
key: 'Task_ID',
},
expand: 'ResponsibleEmployee',
select: [
'Task_ID',
'Task_Subject',
'Task_Start_Date',
'Task_Status',
'ResponsibleEmployee/Employee_Full_Name',
],
};
const statuses = ['All', 'Not Started', 'In Progress', 'Need Assistance', 'Deferred', 'Completed'];
const dataGridRef = ref<DxDataGrid | null>(null);
const onValueChanged = ({ value }: ValueChangedEvent) => {
const dataGrid = dataGridRef.value?.instance!;
if (value === 'All') {
dataGrid.clearFilter();
} else {
dataGrid.filter(['Task_Status', '=', value]);
}
};
</script>
<style scoped>
.right-side {
position: absolute;
right: 1px;
top: 6px;
}
.logo {
line-height: 48px;
}
.logo img {
vertical-align: middle;
margin: 0 5px;
}
.logo img:first-child {
margin-right: 9px;
}
.dx-row.dx-data-row .employee {
color: #bf4e6a;
font-weight: bold;
}
#gridContainer {
margin: 20px 0;
height: 400px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script type="module">
import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://unpkg.com/typescript@3.9.10/lib/typescript.js"></script>
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme-vue': 'npm:devextreme-vue@23.1.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);