DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Filtering API

The DataGrid includes the following API you can use to filter data:

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.

Backend API
$(() => { $('#selectStatus').dxSelectBox({ dataSource: statuses, value: statuses[0], inputAttr: { 'aria-label': 'Status' }, onValueChanged(data) { if (data.value === 'All') { dataGrid.clearFilter(); } else { dataGrid.filter(['Task_Status', '=', data.value]); } }, }); const dataGrid = $('#gridContainer').dxDataGrid({ dataSource: { store: { type: 'odata', version: 2, url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks', key: 'Task_ID', }, expand: 'ResponsibleEmployee', select: [ 'Task_ID', 'Task_Subject', 'Task_Start_Date', 'Task_Due_Date', 'Task_Status', 'Task_Priority', 'ResponsibleEmployee/Employee_Full_Name', ], }, columnAutoWidth: true, showBorders: true, columns: [ { dataField: 'Task_ID', width: 80, }, { caption: 'Start Date', dataField: 'Task_Start_Date', dataType: 'date', }, { caption: 'Assigned To', dataField: 'ResponsibleEmployee.Employee_Full_Name', cssClass: 'employee', allowSorting: false, }, { caption: 'Subject', dataField: 'Task_Subject', width: 350, }, { caption: 'Status', dataField: 'Task_Status', }, ], }).dxDataGrid('instance'); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <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"> <div id="selectStatus"></div> </div> <div id="gridContainer"></div> </div> </body> </html>
.right-side { position: absolute; right: 1px; top: 6px; } .logo { line-height: 48px; } .logo img { vertical-align: middle; margin: 0 5px; } .dx-row.dx-data-row .employee { color: #bf4e6a; font-weight: bold; } #gridContainer { margin: 20px 0; height: 400px; }
const statuses = ['All', 'Not Started', 'In Progress', 'Need Assistance', 'Deferred', 'Completed'];