Your search did not match any results.

Filtering

Documentation

This example demonstrates the DataGrid’s built-in filtering and searching capabilities. The filter row, located under the column headers, allows a user to type any value and select filter operations. With the header filter, which is called by clicking the filter icon in any column header, a user can choose from a set of predefined values. The search panel at the top of the DataGrid allows searching for values in all columns at once.

Backend API
@using DevExtreme.NETCore.Demos.Models; @(Html.DevExtreme().DataGrid<OrderWithDelivery>() .ID("gridContainer") .ShowBorders(true) .FilterRow(filterRow => filterRow .Visible(true) .ApplyFilter(GridApplyFilterMode.Auto) ) .SearchPanel(searchPanel => searchPanel .Visible(true) .Width(240) .Placeholder("Search...") ) .HeaderFilter(headerFilter => headerFilter.Visible(true)) .Columns(columns => { columns.AddFor(m => m.OrderNumber) .Width(140) .HeaderFilter(filter => filter.GroupInterval(10000)); columns.AddFor(m => m.OrderDate) .Width(120) .Alignment(HorizontalAlignment.Right) .CalculateFilterExpression(@<text> function(value, selectedFilterOperations, target) { if(target === "headerFilter" && value === "weekends") { return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]]; } return this.defaultCalculateFilterExpression.apply(this, arguments); } </text>) .HeaderFilter(filter => filter.DataSource(@<text> function(data) { data.dataSource.postProcess = function(results) { results.push({ text: "Weekends", value: "weekends" }); return results; }; } </text>)); columns.AddFor(m => m.DeliveryDate) .Width(180) .Alignment(HorizontalAlignment.Right) .Format("M/d/yyyy, HH:mm"); columns.AddFor(m => m.SaleAmount) .Alignment(HorizontalAlignment.Right) .Format(Format.Currency) .EditorOptions(new { format = "currency", showClearButton = true }) .HeaderFilter(filter => filter.DataSource(new[] { new { text = "Less than $3000", value = new object[] { "SaleAmount", "<", 3000 } }, new { text = "$3000 - $5000", value = new object[] { new object[] { "SaleAmount", ">=", 3000 }, new object[] { "SaleAmount", "<", 5000 } } }, new { text = "$5000 - $10000", value = new object[] { new object[] { "SaleAmount", ">=", 5000 }, new object[] { "SaleAmount", "<", 10000 } } }, new { text = "$10000 - $20000", value = new object[] { new object[] { "SaleAmount", ">=", 10000}, new object[] { "SaleAmount", "<", 20000}} }, new { text = "Greater than $20000", value = new object[] { "SaleAmount", ">=", 20000 } } })); columns.AddFor(m => m.Employee); columns.AddFor(m => m.CustomerStoreCity).HeaderFilter(hf => { hf.Search(hfs => hfs.Enabled(true)); }); }) .DataSource(d => d.Mvc().Controller("DataGridFiltering").LoadAction("Get").Key("ID")) ) <div class="options"> <div class="caption">Options</div> <div class="apply-filter option"> <span>Apply Filter</span> @{ var dataSource = new[] { new ApplyFilterType { Key = "auto", Name = "Immediately" }, new ApplyFilterType { Key = "onClick", Name = "On Button Click" } }; } @(Html.DevExtreme().SelectBox() .ID("applyFilterEditor") .DataSource(dataSource) .Value(dataSource[0].Key) .InputAttr("aria-label", "Filter") .ValueExpr("Key") .DisplayExpr("Name") .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.option("filterRow.applyFilter", data.value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Filter Row") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.clearFilter(); dataGrid.option("filterRow.visible", data.value); $("#applyFilterEditor") .dxSelectBox("instance") .option("disabled", !data.value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Header Filter") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.clearFilter(); dataGrid.option("headerFilter.visible", data.value); } </text>) ) </div> </div> <script> function getOrderDay(rowData) { return (new Date(rowData.OrderDate)).getDay(); } </script>
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 Filtering() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Net.Http; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class DataGridFilteringController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.OrdersWithDelivery, loadOptions); } } }
using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<OrderWithDelivery> OrdersWithDelivery = new[] { new OrderWithDelivery { ID = 1, OrderNumber = 35703, OrderDate = DateTime.Parse("2017/04/10"), DeliveryDate = DateTime.Parse("2017/04/13 9:00"), SaleAmount = 11800, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 4, OrderNumber = 35711, OrderDate = DateTime.Parse("2017/01/12"), DeliveryDate = DateTime.Parse("2017/01/13 9:00"), SaleAmount = 16050, Terms = "15 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 5, OrderNumber = 35714, OrderDate = DateTime.Parse("2017/01/22"), DeliveryDate = DateTime.Parse("2017/01/27 9:00"), SaleAmount = 14750, Terms = "15 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 7, OrderNumber = 35983, OrderDate = DateTime.Parse("2017/02/07"), DeliveryDate = DateTime.Parse("2017/02/10 13:00"), SaleAmount = 3725, Terms = "15 Days", CustomerStoreCity = "Denver, CO", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 11, OrderNumber = 38466, OrderDate = DateTime.Parse("2017/03/01"), DeliveryDate = DateTime.Parse("2017/03/03 17:45"), SaleAmount = 7800, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 14, OrderNumber = 39420, OrderDate = DateTime.Parse("2017/02/15"), DeliveryDate = DateTime.Parse("2017/02/17 11:45"), SaleAmount = 20500, Terms = "15 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 15, OrderNumber = 39874, OrderDate = DateTime.Parse("2017/02/04"), DeliveryDate = DateTime.Parse("2017/02/10 15:00"), SaleAmount = 9050, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 18, OrderNumber = 42847, OrderDate = DateTime.Parse("2017/02/15"), DeliveryDate = DateTime.Parse("2017/02/17 8:30"), SaleAmount = 20400, Terms = "30 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 30, OrderNumber = 57429, OrderDate = DateTime.Parse("2017/05/16"), DeliveryDate = DateTime.Parse("2017/05/19 11:45"), SaleAmount = 11050, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 32, OrderNumber = 58292, OrderDate = DateTime.Parse("2017/05/13"), DeliveryDate = DateTime.Parse("2017/05/19 14:30"), SaleAmount = 13500, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 36, OrderNumber = 62427, OrderDate = DateTime.Parse("2017/01/27"), DeliveryDate = DateTime.Parse("2017/02/03 18:00"), SaleAmount = 23500, Terms = "15 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 39, OrderNumber = 65977, OrderDate = DateTime.Parse("2017/02/05"), DeliveryDate = DateTime.Parse("2017/02/10 13:15"), SaleAmount = 2550, Terms = "15 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 42, OrderNumber = 68428, OrderDate = DateTime.Parse("2017/04/10"), DeliveryDate = DateTime.Parse("2017/04/14 11:30"), SaleAmount = 10500, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 43, OrderNumber = 69477, OrderDate = DateTime.Parse("2017/03/09"), DeliveryDate = DateTime.Parse("2017/03/10 12:00"), SaleAmount = 14200, Terms = "15 Days", CustomerStoreCity = "Anaheim, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 46, OrderNumber = 72947, OrderDate = DateTime.Parse("2017/01/14"), DeliveryDate = DateTime.Parse("2017/01/20 9:00"), SaleAmount = 13350, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 47, OrderNumber = 73088, OrderDate = DateTime.Parse("2017/03/25"), DeliveryDate = DateTime.Parse("2017/03/31 17:15"), SaleAmount = 8600, Terms = "30 Days", CustomerStoreCity = "Reno, NV", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 51, OrderNumber = 77297, OrderDate = DateTime.Parse("2017/04/30"), DeliveryDate = DateTime.Parse("2017/05/05 18:00"), SaleAmount = 10850, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 56, OrderNumber = 84744, OrderDate = DateTime.Parse("2017/02/10"), DeliveryDate = DateTime.Parse("2017/02/17 14:00"), SaleAmount = 4650, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 57, OrderNumber = 85028, OrderDate = DateTime.Parse("2017/05/17"), DeliveryDate = DateTime.Parse("2017/05/19 12:00"), SaleAmount = 2575, Terms = "30 Days", CustomerStoreCity = "Reno, NV", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 59, OrderNumber = 87297, OrderDate = DateTime.Parse("2017/04/21"), DeliveryDate = DateTime.Parse("2017/04/28 9:00"), SaleAmount = 14200, Terms = "30 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 65, OrderNumber = 94726, OrderDate = DateTime.Parse("2017/05/22"), DeliveryDate = DateTime.Parse("2017/05/26 13:30"), SaleAmount = 20500, Terms = "15 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 66, OrderNumber = 95266, OrderDate = DateTime.Parse("2017/03/10"), DeliveryDate = DateTime.Parse("2017/03/17 11:45"), SaleAmount = 9050, Terms = "15 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 69, OrderNumber = 98477, OrderDate = DateTime.Parse("2017/01/01"), DeliveryDate = DateTime.Parse("2017/01/06 9:00"), SaleAmount = 23500, Terms = "15 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 78, OrderNumber = 174884, OrderDate = DateTime.Parse("2017/04/10"), DeliveryDate = DateTime.Parse("2017/04/14 8:30"), SaleAmount = 7200, Terms = "30 Days", CustomerStoreCity = "Denver, CO", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 81, OrderNumber = 188877, OrderDate = DateTime.Parse("2017/02/11"), DeliveryDate = DateTime.Parse("2017/02/17 16:00"), SaleAmount = 8750, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 82, OrderNumber = 191883, OrderDate = DateTime.Parse("2017/02/05"), DeliveryDate = DateTime.Parse("2017/02/10 18:30"), SaleAmount = 9900, Terms = "30 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 83, OrderNumber = 192474, OrderDate = DateTime.Parse("2017/01/21"), DeliveryDate = DateTime.Parse("2017/01/27 12:45"), SaleAmount = 12800, Terms = "30 Days", CustomerStoreCity = "Anaheim, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 84, OrderNumber = 193847, OrderDate = DateTime.Parse("2017/03/21"), DeliveryDate = DateTime.Parse("2017/03/24 9:00"), SaleAmount = 14100, Terms = "30 Days", CustomerStoreCity = "San Diego, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 85, OrderNumber = 194877, OrderDate = DateTime.Parse("2017/03/06"), DeliveryDate = DateTime.Parse("2017/03/10 18:15"), SaleAmount = 4750, Terms = "30 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 86, OrderNumber = 195746, OrderDate = DateTime.Parse("2017/05/26"), DeliveryDate = DateTime.Parse("2017/06/02 17:00"), SaleAmount = 9050, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 87, OrderNumber = 197474, OrderDate = DateTime.Parse("2017/03/02"), DeliveryDate = DateTime.Parse("2017/03/03 11:00"), SaleAmount = 6400, Terms = "30 Days", CustomerStoreCity = "Reno, NV", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 88, OrderNumber = 198746, OrderDate = DateTime.Parse("2017/05/09"), DeliveryDate = DateTime.Parse("2017/05/12 15:45"), SaleAmount = 15700, Terms = "30 Days", CustomerStoreCity = "Denver, CO", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 91, OrderNumber = 214222, OrderDate = DateTime.Parse("2017/02/08"), DeliveryDate = DateTime.Parse("2017/02/10 9:45"), SaleAmount = 11050, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" } }; } }
using System; using System.ComponentModel.DataAnnotations; namespace DevExtreme.NETCore.Demos.Models { public class OrderWithDelivery { public int ID { get; set; } [Display(Name = "Invoice Number")] public int OrderNumber { get; set; } public DateTime OrderDate { get; set; } public DateTime DeliveryDate { get; set; } public int SaleAmount { get; set; } public string Terms { get; set; } public int TotalAmount { get; set; } [Display(Name = "City")] public string CustomerStoreCity { get; set; } public string Employee { get; set; } } }
#gridContainer { height: 440px; } .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; }