Your search did not match any results.

Filtering API

The DataGrid widget ships with an integrated filtering API, allowing you apply filters in code. In this example, the grid’s filter function is called to filter data based on selections made within the drop-down menu above the DataGrid.
<div class="left-side"> <div class="logo"> <img src="../../Content/images/DataGrid/logo-devav.png" /> <img src="../../Content/images/DataGrid/logo-tasks.png" /> </div> </div> <div class="right-side"> @{ var statuses = new string[] { "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("") .Expand("ResponsibleEmployee") ) .DataSourceOptions(d => d.Select(new string[] { "Task_ID", "Task_Subject", "Task_Start_Date", "Task_Status", "ResponsibleEmployee/Employee_Full_Name" }) ) .ColumnAutoWidth(true) .Columns(columns => { columns.Add() .DataField("Task_ID"); 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"); 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; }