Your search did not match any results.

Filtering API

Documentation

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

In this demo, you can use the SelectBox widget to filter the grid's dataSource. The "All" item calls the clearFilter() method and the other items call the filter(filterExpr) method.

<div class="left-side"> <div class="logo"> <img src="~/images/DataGrid/logo-devav.png" /> <img src="~/images/DataGrid/logo-tasks.png" /> </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]) .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") .DataSource(d => d.OData() .Url("https://js.devexpress.com/Demos/DevAV/odata/Tasks") .Expand("ResponsibleEmployee") ) .DataSourceOptions(d => d.Select(new[] { "Task_ID", "Task_Subject", "Task_Start_Date", "Task_Status", "ResponsibleEmployee/Employee_Full_Name" }) ) .ColumnAutoWidth(true) .ShowBorders(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.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(); } } }
.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; }