Your search did not match any results.
Data Grid

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[] { "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") .ShowBorders(true) .DataSource(d => d.OData() .Url("") .Expand("ResponsibleEmployee") ) .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; }