Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@using DevExtreme.MVC.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 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;
namespace DevExtreme.MVC.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 = "../../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: 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;
}