Your search did not match any results.

Filtering API

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

Backend API
<div class="left-side"> <div class="logo"> <img src="../../Content/images/DataGrid/logo-devav.png" alt="DEVAV"/> <img src="../../Content/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() .ID("gridContainer") .ShowBorders(true) .DataSource(d => d.OData() .Version(2) .Url("") .Expand("ResponsibleEmployee") .Key("Task_ID") ) .DataSourceOptions(d => d.Select(new[] { "Task_ID", "Task_Subject", "Task_Start_Date", "Task_Status", "ResponsibleEmployee/Employee_Full_Name" })) .ColumnAutoWidth(true) .Columns(columns => { columns.Add() .DataField("Task_ID") .Width(80); columns.Add() .Caption("Start Date") .DataField("Task_Start_Date") .DataType(GridColumnDataType.Date); columns.Add() .Caption("Assigned To") .DataField("ResponsibleEmployee.Employee_Full_Name") .CssClass("employee") .AllowSorting(false); columns.Add() .Caption("Subject") .DataField("Task_Subject") .Width(350); columns.Add() .Caption("Status") .DataField("Task_Status"); }) )
using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult FilteringAPI() { return View(); } } }
.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; }

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.