Your search did not match any results.
FilterBuilder

With Data Grid

Documentation

This demo shows how to filter data in the DataGrid using the FilterBuilder widget.

@{ var value = new object[] { new object[] { "Product_Current_Inventory", FilterBuilderFieldFilterOperations.NotEqual, 0 }, "or", new object[] { new object[] { "Product_Name", FilterBuilderFieldFilterOperations.Contains, "HD" }, 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 string[] { "Product_ID", "Product_Name", "Product_Cost", "Product_Sale_Price", "Product_Retail_Price", "Product_Current_Inventory" }) .Filter(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").filter(filter); } </script>
.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; }