Your search did not match any results.
Documentation

This demo shows how to filter data in the List using the FilterBuilder widget. Here, the FilterBuilder provides a set of built-in filter operations, as well as a custom "anyof" operation which is implemented in the customOperations array. A condition with this operation evaluates to true if the data field contains any value from the list. Note that the calculateFilterExpression function converts the «anyof» operation into a set of operations supported by the DataSource. This operation is available only for the "Category" field because it is specified in the field’s filterOperations array.

@using DevExtreme.NETCore.Demos.Models @model List<ListProduct> @{ var value = new object[] { new object[] { "Category", "anyof", new string[] { "Video Players", "Automation" } }, "or", new object[] { new object[] { "Category", "anyof", new string[] { "Monitors", "Projectors" } }, "and", new object[] { "Price", "between", new int[] { 165, 700 } } }, "or", new object[] { new object[] { "Category", FilterBuilderFieldFilterOperations.Equal, "Televisions" }, "and", new object[] { "Price", "between", new int[] { 2000, 4000 } } } }; var categories = new string[] { "Video Players", "Televisions", "Monitors", "Projectors", "Automation" }; } <div class="filter-container"> @(Html.DevExtreme().FilterBuilder<ListProduct>() .ID("filterBuilder") .Fields(fields => { fields.AddFor(m => m.ID); fields.AddFor(m => m.Name); fields.AddFor(m => m.Price) .Format(Format.Currency); fields.AddFor(m => m.CurrentInventory) .Caption("Inventory"); fields.AddFor(m => m.Category) .FilterOperations(new string[] { "=", "anyof" }) .Lookup(l => l.DataSource(categories)); }) .Value(value) .CustomOperations(o => { o.Add() .Name("anyof") .Caption("Is any of") .Icon("check") .EditorTemplate(@<text>@( Html.DevExtreme().TagBox() .Value(new JS("value")) .Items(categories) .OnValueChanged(@"function(e) { setValue(e.value); }") .Width("auto") )</text>) .CalculateFilterExpression("tagBox_calculateFilterExpression"); }) ) @(Html.DevExtreme().Button() .Text("Apply Filter") .Type(ButtonType.Default) .OnClick("applyFilter") ) </div> <div class="list-container"> @(Html.DevExtreme().List() .ID("listWidget") .DataSource(@Model) .DataSourceOptions(d => d.Filter("$('#filterBuilder').dxFilterBuilder('instance').getFilterExpression()")) .ItemTemplate(@<text> <div class="product"> <img src="<%= ImageSrc %>"> <div><%= Name %></div> <div class="price"><%= Globalize.formatCurrency(Price, "USD", { maximumFractionDigits: 0 }) %></div> </div> </text>) ) </div> <script> function tagBox_calculateFilterExpression(filterValue, field) { if (filterValue && filterValue.length > 0) { var result = [], lastIndex = filterValue.length - 1; filterValue.forEach(function (value, index) { result.push([field.dataField, "=", value]); index !== lastIndex && result.push("or"); }); return result; } } function applyFilter(data) { var filter = $("#filterBuilder").dxFilterBuilder("instance").getFilterExpression(), dataSource = $("#listWidget").dxList("instance").getDataSource(); dataSource.filter(filter); dataSource.load(); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class FilterBuilderController : Controller { public ActionResult WithList() { return View(SampleData.ListProducts); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ListProduct { public int ID { get; set; } public string Name { get; set; } public double Price { get; set; } public int? CurrentInventory { get; set; } public int Backorder { get; set; } public int Manufacturing { get; set; } public string Category { get; set; } public string ImageSrc { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<ListProduct> ListProducts = new List<ListProduct> { new ListProduct() { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../images/ProductsLarge/1.png" }, new ListProduct() { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/3.png" }, new ListProduct() { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/4.png" }, new ListProduct() { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/5.png" }, new ListProduct() { ID = 6, Name = "SuperLCD 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/6.png" }, new ListProduct() { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/7.png" }, new ListProduct() { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/8.png" }, new ListProduct() { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/9.png" }, new ListProduct() { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = null, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/10.png" }, new ListProduct() { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/12.png" }, new ListProduct() { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/13.png" }, new ListProduct() { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = null, Backorder = 55, Manufacturing = 10, Category = "Projectors", ImageSrc = "../../images/ProductsLarge/14.png" }, new ListProduct() { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../images/ProductsLarge/15.png" }, new ListProduct() { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../images/ProductsLarge/17.png" }, new ListProduct() { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../images/ProductsLarge/18.png" }, new ListProduct() { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../images/ProductsLarge/19.png" } }; } }
.filter-container { background-color: rgba(191, 191, 191, 0.15); width: 55%; float: left; margin-bottom: 25px; height: 430px; } .dx-filterbuilder { padding: 10px; height: 360px; margin: 5px; overflow: auto; } .dx-filterbuilder .dx-texteditor { width: 135px; } .dx-button { margin: 10px 20px; float: right; } .list-container { float: right; width: 45%; } .list-container .dx-scrollable-container { max-height: 430px; padding-left: 30px; } .product { height: 65px; } .product > img { height: 100%; float: left; } .product > div { padding-left: 10px; vertical-align: top; line-height: 65px; font-size: 15px; float: left; } .product > div.price { float: right; font-size: 18px; } .dx-tagbox { min-width: 150px; } .dx-filterbuilder .dx-numberbox { width: 80px; }