Your search did not match any results.

Filter Builder - With List

This demo shows how to filter data in the List using the FilterBuilder component. Note that the DataSource does not support the "between" operation. Call the getFilterExpression() method to convert it into DataSource-compatible operations.

Backend API
@using DevExtreme.NETCore.Demos.Models @model IEnumerable<ListProduct> @{ var value = new object[] { new object[] { "Category", "=", "Video Players" }, "or", new object[] { new object[] { "Category", "=", "Monitors" }, "and", new object[] { "Price", "between", new[] { 165, 700 } } }, "or", new object[] { new object[] { "Category", FilterBuilderFieldFilterOperations.Equal, "Televisions" }, "and", new object[] { "Price", "between", new[] { 2000, 4000 } } } }; var categories = new[] { "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) .Lookup(l => l.DataSource(categories)); }) .Value(value) ) @(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 %>" alt="Picture of <%- Name %>"> <div><%- Name %></div> <div class="price"><%- formatCurrency(Price) %></div> </div> </text>) ) </div> <script> function formatCurrency(value) { return "$" + new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value); } 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 readonly IEnumerable<ListProduct> ListProducts = new[] { 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: 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; width: 55%; float: left; margin-bottom: 25px; height: 430px; } .dx-filterbuilder { background-color: transparent; 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-filterbuilder .dx-numberbox { width: 80px; }