Your search did not match any results.
FilterBuilder

With List

Documentation

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

@using DevExtreme.MVC.Demos.Models @model List<ListProduct> @{ var value = new object[] { new object[] { "Category", "=", "Video Players" }, "or", new object[] { new object[] { "Category", "=", "Monitors" }, "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) .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 %>"> <div><%= Name %></div> <div class="price"><%= Globalize.formatCurrency(Price, "USD", { maximumFractionDigits: 0 }) %></div> </div> </text>) ) </div> <script> function applyFilter(data) { var filter = $("#filterBuilder").dxFilterBuilder("instance").getFilterExpression(), dataSource = $("#listWidget").dxList("instance").getDataSource(); dataSource.filter(filter); dataSource.load(); } </script>
using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class FilterBuilderController : Controller { public ActionResult WithList() { return View(SampleData.ListProducts); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.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.MVC.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 = "../../Content/Images/ProductsLarge/1.png" }, new ListProduct() { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/3.png" }, new ListProduct() { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/4.png" }, new ListProduct() { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/5.png" }, new ListProduct() { ID = 6, Name = "SuperLCD 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/6.png" }, new ListProduct() { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/7.png" }, new ListProduct() { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/8.png" }, new ListProduct() { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/9.png" }, new ListProduct() { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = null, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../Content/Images/ProductsLarge/10.png" }, new ListProduct() { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../Content/Images/ProductsLarge/12.png" }, new ListProduct() { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../Content/Images/ProductsLarge/13.png" }, new ListProduct() { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = null, Backorder = 55, Manufacturing = 10, Category = "Projectors", ImageSrc = "../../Content/Images/ProductsLarge/14.png" }, new ListProduct() { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../Content/Images/ProductsLarge/15.png" }, new ListProduct() { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../Content/Images/ProductsLarge/17.png" }, new ListProduct() { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../Content/Images/ProductsLarge/18.png" }, new ListProduct() { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../Content/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-filterbuilder .dx-numberbox { width: 80px; }