Filter Builder - With Data Grid

This demo shows how to use a standalone FilterBuilder to filter data in the DataGrid component. The DataGrid also has an integrated filter builder that can be invoked using the filter panel (see the Filter Panel demo).

Backend API

@{ var value = new object[] { new object[] { "Product_Current_Inventory", FilterBuilderFieldFilterOperations.NotEqual, 0 }, "or", new object[] { new object[] { "Product_Name", FilterBuilderFieldFilterOperations.Contains, "HD" }, "and", new object[] { "Product_Cost", FilterBuilderFieldFilterOperations.LessThan, 200 } } }; } <div class="filter-container"> @(Html.DevExtreme().FilterBuilder() .ID("filterBuilder") .Fields(fields => { fields.Add() .DataField("Product_ID") .Caption("ID") .DataType(FilterBuilderFieldDataType.Number); fields.Add() .DataField("Product_Name"); fields.Add() .Caption("Cost") .DataField("Product_Cost") .DataType(FilterBuilderFieldDataType.Number) .Format(Format.Currency); fields.Add() .DataField("Product_Sale_Price") .Caption("Sale Price") .DataType(FilterBuilderFieldDataType.Number) .Format(Format.Currency); fields.Add() .DataField("Product_Retail_Price") .Caption("Retail Price") .DataType(FilterBuilderFieldDataType.Number) .Format(Format.Currency); fields.Add() .DataField("Product_Current_Inventory") .Caption("Inventory"); }) .Value(value) ) @(Html.DevExtreme().Button() .Text("Apply Filter") .Type(ButtonType.Default) .OnClick("applyFilter") ) <div class="dx-clearfix"></div> </div> @(Html.DevExtreme().DataGrid() .ID("dataGrid") .DataSource(d => d.OData() .Version(2) .Url("https://js.devexpress.com/Demos/DevAV/odata/Products") .Key("Product_ID") .FieldTypes(new Dictionary<string, EdmType> { { "Product_Cost", EdmType.Decimal }, { "Product_Sale_Price", EdmType.Decimal }, { "Product_Retail_Price", EdmType.Decimal } }) ) .DataSourceOptions(d => d.Select(new[] { "Product_ID", "Product_Name", "Product_Cost", "Product_Sale_Price", "Product_Retail_Price", "Product_Current_Inventory" }) ) .FilterValue(value) .ShowBorders(true) .Columns(columns => { columns.Add() .DataField("Product_ID") .Width(50) .Caption("ID") .DataType(GridColumnDataType.Number); columns.Add() .DataField("Product_Name"); columns.Add() .Caption("Cost") .DataField("Product_Cost") .DataType(GridColumnDataType.Number) .Format(Format.Currency); columns.Add() .DataField("Product_Sale_Price") .Caption("Sale Price") .DataType(GridColumnDataType.Number) .Format(Format.Currency); columns.Add() .DataField("Product_Retail_Price") .Caption("Retail Price") .DataType(GridColumnDataType.Number) .Format(Format.Currency); columns.Add() .DataField("Product_Current_Inventory") .Caption("Inventory"); }) .Height(300) ) <script> function applyFilter(data) { var filter = $("#filterBuilder").dxFilterBuilder("instance").option("value"); $("#dataGrid").dxDataGrid("instance").option("filterValue", filter); } </script>

using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class FilterBuilderController : Controller { public IActionResult WithDataGrid() { return View(); } } }

.filter-container { background-color: transparent; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); border-radius: 6px; padding: 5px; width: 500px; margin-bottom: 25px; } .dx-filterbuilder { background-color: transparent; padding: 10px; } .dx-button { margin: 10px; float: right; } .dx-filterbuilder .dx-numberbox { width: 80px; }