@{
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;
}