Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Filter Builder

With Data Grid

Documentation

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

@{ 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() .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 System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class FilterBuilderController : Controller { public ActionResult WithDataGrid() { return View(); } } }
.filter-container { background-color: rgba(191, 191, 191, 0.15); padding: 5px; width: 500px; margin-bottom: 25px; } .dx-filterbuilder { padding: 10px; } .dx-button { margin: 10px; float: right; } .dx-filterbuilder .dx-numberbox { width: 80px; }