Data Grid - Filtering API

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

Backend API

@using DevExtreme.NETCore.Demos.Models.DataGrid; @model IEnumerable<DataGridEmployeeTask> <div class="left-side"> <div class="logo"> <img src="~/images/DataGrid/logo-devav.png" alt="DEVAV" /> <img src="~/images/DataGrid/logo-tasks.png" alt="Tasks" /> </div> </div> <div class="right-side"> @{ var statuses = new[] { "All", "Not Started", "In Progress", "Need Assistance", "Deferred", "Completed" }; } @(Html.DevExtreme().SelectBox() .DataSource(statuses) .Value(statuses[0]) .InputAttr("aria-label", "Status") .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); if (data.value == "All") dataGrid.clearFilter(); else dataGrid.filter(["Task_Status", "=", data.value]); } </text>) ) </div> @(Html.DevExtreme().DataGrid<DataGridEmployeeTask>() .ID("gridContainer") .DataSource(Model, "Task_ID") .ColumnAutoWidth(true) .ShowBorders(true) .Pager(p => p.Visible(true)) .Columns(columns => { columns.AddFor(m => m.Task_ID) .Width(80); columns.AddFor(m => m.Task_Start_Date) .Caption("Start Date") .DataType(GridColumnDataType.Date); columns.AddFor(m => m.Employee_Full_Name) .Caption("Assigned To") .CssClass("employee") .AllowSorting(false); columns.AddFor(m => m.Task_Subject) .Caption("Subject") .Width(350); columns.AddFor(m => m.Task_Status) .Caption("Status"); }) )

using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.DataGrid; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class DataGridController : Controller { public ActionResult FilteringAPI() { return View(DataGridTasksSampleData.Tasks); } } }

.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; }

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 the returnDataField parameter, the returned value contains data field names instead of getters.
clearFilter() / clearFilter(filterName)
Discards all filters applied to the DataGrid. If you specify the filterName parameter, 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.