Your search did not match any results.
DataGrid

Filter Builder

Documentation

This demo shows how to filter data in the DataGrid using the FilterBuilder — a widget that allows you to build complex filter expressions in the UI. Click the Filter Builder button to open the FilterBuilder. Use the check box under the DataGrid to show hierarchical columns in the FilterBuilder.

@using DevExtreme.NETCore.Demos.Models @model List<OrderWithCustomerInfo> @{ var filterValue = new object[] { new object[] { "Employee", FilterBuilderFieldFilterOperations.Equal, "Harv Mudd" }, "or", new object[] { "Employee", FilterBuilderFieldFilterOperations.Equal, "Todd Hoffman" }, "or", new object[] { new object[] { "Employee", FilterBuilderFieldFilterOperations.Equal, "Clark Morgan" }, "and", new object[] { "CustomerInfo.StoreCity", FilterBuilderFieldFilterOperations.Equal, "Salt Lake City" } } }; } @(Html.DevExtreme().Popup() .ID("popup") .Title("Filter Builder") .DeferRendering(false) .ContentTemplate(@<text> @(Html.DevExtreme().FilterBuilder<OrderWithCustomerInfo>() .ID("filterBuilder") .Fields(fields => { fields.AddFor(m => m.OrderNumber); fields.AddFor(m => m.OrderDate); fields.AddFor(m => m.SaleAmount).Format(Format.Currency); fields.AddFor(m => m.Employee); fields.AddFor(m => m.CustomerInfo.StoreCity); fields.AddFor(m => m.CustomerInfo.StoreState); }) ) </text>) .OnShowing("onPopupShowing") .ToolbarItems(items => { items.Add() .Location(ToolbarItemLocation.After) .Toolbar(Toolbar.Bottom) .Widget(w => w.Button() .Text("OK") .OnClick("applyFilterClick") ); items.Add() .Location(ToolbarItemLocation.After) .Toolbar(Toolbar.Bottom) .Widget(w => w.Button() .Text("Cancel") .OnClick("hidePopupClick") ); }) ) @(Html.DevExtreme().DataGrid<OrderWithCustomerInfo>() .ID("gridContainer") .DataSource(Model) .DataSourceOptions(d => d.Filter(filterValue)) .Columns(columns => { columns.AddFor(m => m.OrderNumber); columns.AddFor(m => m.OrderDate); columns.AddFor(m => m.SaleAmount).Format(Format.Currency); columns.AddFor(m => m.Employee); columns.AddFor(m => m.CustomerInfo.StoreCity); columns.AddFor(m => m.CustomerInfo.StoreState); }) .OnToolbarPreparing("onDataGridToolbarPreparing") ) <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Allow hierarchical fields") .Value(false) .OnValueChanged("changeAllowHierarchicalFieldsOption") ) </div> </div> <script> function applyFilterClick() { var filter = $("#filterBuilder").dxFilterBuilder("instance").option("value"); $("#gridContainer").dxDataGrid("instance").filter(filter); $("#filterButton").dxButton("instance") .option("type", filter ? "success" : "default"); $("#clearFilterButton").dxButton("instance") .option("disabled", !filter); $("#popup").dxPopup("instance").hide(); } function hidePopupClick() { $("#popup").dxPopup("instance").hide(); } function onPopupShowing() { var gridFilter = $("#gridContainer").dxDataGrid("instance").filter(); $("#filterBuilder").dxFilterBuilder("instance").option("value", gridFilter); } function changeAllowHierarchicalFieldsOption(e) { $("#filterBuilder").dxFilterBuilder("instance").option("allowHierarchicalFields", e.value); } function onDataGridToolbarPreparing(e) { e.toolbarOptions.items.push({ location: "before", widget: "dxButton", options: { elementAttr: { id: "filterButton" }, text: "Filter Builder", type: "success", icon: "filter", onClick: function(e) { $("#popup").dxPopup("instance").show(); } } }, { location: "before", widget: "dxButton", options: { elementAttr: { id: "clearFilterButton" }, text: "Clear Filter", onClick: function(e) { $("#gridContainer").dxDataGrid("instance").clearFilter(); $("#filterBuilder").dxFilterBuilder("instance").option("value", null); e.component.option("disabled", true); $("#filterButton").dxButton("instance").option("type", "default"); } } }); } </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 FilterBuilder() { return View(SampleData.OrdersWithCustomerInfo); } } }
using System.ComponentModel.DataAnnotations; namespace DevExtreme.NETCore.Demos.Models { public class CustomerInfo { [Display(Name = "State")] public string StoreState { get; set; } [Display(Name = "City")] public string StoreCity { get; set; } } }
using DevExtreme.NETCore.Demos.Models; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<OrderWithCustomerInfo> OrdersWithCustomerInfo { get { return new List<OrderWithCustomerInfo> { new OrderWithCustomerInfo { ID = 1, OrderNumber = 35703, OrderDate = DateTime.Parse("2014/04/10"), SaleAmount = 11800, Terms = "15 Days", TotalAmount = 12175, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Los Angeles" }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 4, OrderNumber = 35711, OrderDate = DateTime.Parse("2014/01/12"), SaleAmount = 16050, Terms = "15 Days", TotalAmount = 16550, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "San Jose" }, Employee = "Jim Packard" }, new OrderWithCustomerInfo { ID = 5, OrderNumber = 35714, OrderDate = DateTime.Parse("2014/01/22"), SaleAmount = 14750, Terms = "15 Days", TotalAmount = 15250, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 7, OrderNumber = 35983, OrderDate = DateTime.Parse("2014/02/07"), SaleAmount = 3725, Terms = "15 Days", TotalAmount = 3850, CustomerInfo = new CustomerInfo { StoreState = "Colorado", StoreCity = "Denver", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 9, OrderNumber = 36987, OrderDate = DateTime.Parse("2014/03/11"), SaleAmount = 14200, Terms = "15 Days", TotalAmount = 14800, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City" }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 11, OrderNumber = 38466, OrderDate = DateTime.Parse("2014/03/01"), SaleAmount = 7800, Terms = "15 Days", TotalAmount = 8200, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Los Angeles" }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 14, OrderNumber = 39420, OrderDate = DateTime.Parse("2014/02/15"), SaleAmount = 20500, Terms = "15 Days", TotalAmount = 9100, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "San Jose", }, Employee = "Jim Packard" }, new OrderWithCustomerInfo { ID = 15, OrderNumber = 39874, OrderDate = DateTime.Parse("2014/02/04"), SaleAmount = 9050, Terms = "30 Days", TotalAmount = 19100, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 18, OrderNumber = 42847, OrderDate = DateTime.Parse("2014/02/15"), SaleAmount = 20400, Terms = "30 Days", TotalAmount = 20800, CustomerInfo = new CustomerInfo { StoreState = "Wyoming", StoreCity = "Casper", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 19, OrderNumber = 43982, OrderDate = DateTime.Parse("2014/05/29"), SaleAmount = 6050, Terms = "30 Days", TotalAmount = 6250, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 29, OrderNumber = 56272, OrderDate = DateTime.Parse("2014/02/06"), SaleAmount = 15850, Terms = "30 Days", TotalAmount = 16350, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 30, OrderNumber = 57429, OrderDate = DateTime.Parse("2013/12/31"), SaleAmount = 11050, Terms = "30 Days", TotalAmount = 11400, CustomerInfo = new CustomerInfo { StoreState = "Arizona", StoreCity = "Phoenix", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 32, OrderNumber = 58292, OrderDate = DateTime.Parse("2014/05/13"), SaleAmount = 13500, Terms = "15 Days", TotalAmount = 13800, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Los Angeles", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 36, OrderNumber = 62427, OrderDate = DateTime.Parse("2014/01/27"), SaleAmount = 23500, Terms = "15 Days", TotalAmount = 24000, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 39, OrderNumber = 65977, OrderDate = DateTime.Parse("2014/02/05"), SaleAmount = 2550, Terms = "15 Days", TotalAmount = 2625, CustomerInfo = new CustomerInfo { StoreState = "Wyoming", StoreCity = "Casper", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 40, OrderNumber = 66947, OrderDate = DateTime.Parse("2014/03/23"), SaleAmount = 3500, Terms = "15 Days", TotalAmount = 3600, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 42, OrderNumber = 68428, OrderDate = DateTime.Parse("2014/04/10"), SaleAmount = 10500, Terms = "15 Days", TotalAmount = 10900, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Los Angeles", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 43, OrderNumber = 69477, OrderDate = DateTime.Parse("2014/03/09"), SaleAmount = 14200, Terms = "15 Days", TotalAmount = 14500, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Anaheim", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 46, OrderNumber = 72947, OrderDate = DateTime.Parse("2014/01/14"), SaleAmount = 13350, Terms = "30 Days", TotalAmount = 13650, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 47, OrderNumber = 73088, OrderDate = DateTime.Parse("2014/03/25"), SaleAmount = 8600, Terms = "30 Days", TotalAmount = 8850, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Reno", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 50, OrderNumber = 76927, OrderDate = DateTime.Parse("2014/04/27"), SaleAmount = 9800, Terms = "30 Days", TotalAmount = 10050, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 51, OrderNumber = 77297, OrderDate = DateTime.Parse("2014/04/30"), SaleAmount = 10850, Terms = "30 Days", TotalAmount = 11100, CustomerInfo = new CustomerInfo { StoreState = "Arizona", StoreCity = "Phoenix", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 56, OrderNumber = 84744, OrderDate = DateTime.Parse("2014/02/10"), SaleAmount = 4650, Terms = "30 Days", TotalAmount = 4750, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 57, OrderNumber = 85028, OrderDate = DateTime.Parse("2014/05/17"), SaleAmount = 2575, Terms = "30 Days", TotalAmount = 2625, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Reno", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 59, OrderNumber = 87297, OrderDate = DateTime.Parse("2014/04/21"), SaleAmount = 14200, Terms = "30 Days", CustomerInfo = new CustomerInfo { StoreState = "Wyoming", StoreCity = "Casper", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 60, OrderNumber = 88027, OrderDate = DateTime.Parse("2014/02/14"), SaleAmount = 13650, Terms = "30 Days", TotalAmount = 14050, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 65, OrderNumber = 94726, OrderDate = DateTime.Parse("2014/05/22"), SaleAmount = 20500, Terms = "15 Days", TotalAmount = 20800, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "San Jose", }, Employee = "Jim Packard" }, new OrderWithCustomerInfo { ID = 66, OrderNumber = 95266, OrderDate = DateTime.Parse("2014/03/10"), SaleAmount = 9050, Terms = "15 Days", TotalAmount = 9250, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 69, OrderNumber = 98477, OrderDate = DateTime.Parse("2014/01/01"), SaleAmount = 23500, Terms = "15 Days", TotalAmount = 23800, CustomerInfo = new CustomerInfo { StoreState = "Wyoming", StoreCity = "Casper", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 70, OrderNumber = 99247, OrderDate = DateTime.Parse("2014/02/08"), SaleAmount = 2100, Terms = "15 Days", TotalAmount = 2150, CustomerInfo = new CustomerInfo { StoreState = "Utah", StoreCity = "Salt Lake City", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 78, OrderNumber = 174884, OrderDate = DateTime.Parse("2014/04/10"), SaleAmount = 7200, Terms = "30 Days", TotalAmount = 7350, CustomerInfo = new CustomerInfo { StoreState = "Colorado", StoreCity = "Denver", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 81, OrderNumber = 188877, OrderDate = DateTime.Parse("2014/02/11"), SaleAmount = 8750, Terms = "30 Days", TotalAmount = 8900, CustomerInfo = new CustomerInfo { StoreState = "Arizona", StoreCity = "Phoenix", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 82, OrderNumber = 191883, OrderDate = DateTime.Parse("2014/02/05"), SaleAmount = 9900, Terms = "30 Days", TotalAmount = 10150, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Los Angeles", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 83, OrderNumber = 192474, OrderDate = DateTime.Parse("2014/01/21"), SaleAmount = 12800, Terms = "30 Days", TotalAmount = 13100, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "Anaheim", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 84, OrderNumber = 193847, OrderDate = DateTime.Parse("2014/03/21"), SaleAmount = 14100, Terms = "30 Days", TotalAmount = 14350, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "San Diego", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 85, OrderNumber = 194877, OrderDate = DateTime.Parse("2014/03/06"), SaleAmount = 4750, Terms = "30 Days", TotalAmount = 4950, CustomerInfo = new CustomerInfo { StoreState = "California", StoreCity = "San Jose", }, Employee = "Jim Packard" }, new OrderWithCustomerInfo { ID = 86, OrderNumber = 195746, OrderDate = DateTime.Parse("2014/05/26"), SaleAmount = 9050, Terms = "30 Days", TotalAmount = 9250, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Las Vegas", }, Employee = "Harv Mudd" }, new OrderWithCustomerInfo { ID = 87, OrderNumber = 197474, OrderDate = DateTime.Parse("2014/03/02"), SaleAmount = 6400, Terms = "30 Days", TotalAmount = 6600, CustomerInfo = new CustomerInfo { StoreState = "Nevada", StoreCity = "Reno", }, Employee = "Clark Morgan" }, new OrderWithCustomerInfo { ID = 88, OrderNumber = 198746, OrderDate = DateTime.Parse("2014/05/09"), SaleAmount = 15700, Terms = "30 Days", TotalAmount = 16050, CustomerInfo = new CustomerInfo { StoreState = "Colorado", StoreCity = "Denver", }, Employee = "Todd Hoffman" }, new OrderWithCustomerInfo { ID = 91, OrderNumber = 214222, OrderDate = DateTime.Parse("2014/02/08"), SaleAmount = 11050, Terms = "30 Days", TotalAmount = 11250, CustomerInfo = new CustomerInfo { StoreState = "Arizona", StoreCity = "Phoenix", }, Employee = "Clark Morgan" } }; } } } }
using System; using System.ComponentModel.DataAnnotations; namespace DevExtreme.NETCore.Demos.Models { public class OrderWithCustomerInfo { public int ID { get; set; } [Display(Name = "Invoice Number")] public int OrderNumber { get; set; } public DateTime OrderDate { get; set; } public int SaleAmount { get; set; } public string Terms { get; set; } public int TotalAmount { get; set; } public CustomerInfo CustomerInfo { 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; }