Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
With List
Documentation
This demo shows how to filter data in the List using the FilterBuilder UI component. Note that the DataSource does not support the "between" operation. Call the getFilterExpression() method to convert it into DataSource-compatible operations.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function() {
var currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
var filterBuilderInstance = $("#filterBuilder").dxFilterBuilder({
fields: fields,
value: filter
}).dxFilterBuilder("instance");
$("#listWidget").dxList({
dataSource: new DevExpress.data.DataSource({
store: products,
filter: filterBuilderInstance.getFilterExpression()
}),
height: "100%",
itemTemplate: function(data, index) {
var result = $("<div>").addClass("product");
$("<img>").attr("src", data.ImageSrc).appendTo(result);
$("<div>").text(data.Name).appendTo(result);
$("<div>").addClass("price")
.html(currencyFormatter.format(data.Price)).appendTo(result);
return result;
}
});
$("#apply").dxButton({
text: "Apply Filter",
type: "default",
onClick: function() {
var filter = filterBuilderInstance.getFilterExpression(),
dataSource = $("#listWidget").dxList("instance").getDataSource();
dataSource.filter(filter);
dataSource.load();
},
});
});
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="filter-container">
<div id="filterBuilder"></div>
<div id="apply"></div>
</div>
<div class="list-container">
<div id="listWidget"></div>
</div>
</div>
</body>
</html>
.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;
}
var filter = [
["Category", "=", "Video Players"],
"or",
[
["Category", "=", "Monitors"],
"and",
["Price", "between", [165, 700]]
],
"or",
[
["Category", "=", "Televisions"],
"and",
["Price", "between", [2000, 4000]]
]
],
categories = [
"Video Players",
"Televisions",
"Monitors",
"Projectors",
"Automation"
],
fields = [
{
dataField: "ID",
dataType: "number"
}, {
dataField: "Name"
}, {
dataField: "Price",
dataType: "number",
format: "currency"
}, {
dataField: "Current_Inventory",
dataType: "number",
caption: "Inventory"
}, {
dataField: "Category",
lookup: {
dataSource: categories
}
}
],
products = [{
"ID": 1,
"Name": "HD Video Player",
"Price": 330,
"Current_Inventory": 225,
"Backorder": 0,
"Manufacturing": 10,
"Category": "Video Players",
"ImageSrc": "../../../../images/products/1.png"
}, {
"ID": 3,
"Name": "SuperPlasma 50",
"Price": 2400,
"Current_Inventory": 0,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/3.png"
}, {
"ID": 4,
"Name": "SuperLED 50",
"Price": 1600,
"Current_Inventory": 77,
"Backorder": 0,
"Manufacturing": 55,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/4.png"
}, {
"ID": 5,
"Name": "SuperLED 42",
"Price": 1450,
"Current_Inventory": 445,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/5.png"
}, {
"ID": 6,
"Name": "SuperLCD 55",
"Price": 1350,
"Current_Inventory": 345,
"Backorder": 0,
"Manufacturing": 5,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/6.png"
}, {
"ID": 7,
"Name": "SuperLCD 42",
"Price": 1200,
"Current_Inventory": 210,
"Backorder": 0,
"Manufacturing": 20,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/7.png"
}, {
"ID": 8,
"Name": "SuperPlasma 65",
"Price": 3500,
"Current_Inventory": 0,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/8.png"
}, {
"ID": 9,
"Name": "SuperLCD 70",
"Price": 4000,
"Current_Inventory": 95,
"Backorder": 0,
"Manufacturing": 5,
"Category": "Televisions",
"ImageSrc": "../../../../images/products/9.png"
}, {
"ID": 10,
"Name": "DesktopLED 21",
"Price": 175,
"Current_Inventory": null,
"Backorder": 425,
"Manufacturing": 75,
"Category": "Monitors",
"ImageSrc": "../../../../images/products/10.png"
}, {
"ID": 12,
"Name": "DesktopLCD 21",
"Price": 170,
"Current_Inventory": 210,
"Backorder": 0,
"Manufacturing": 60,
"Category": "Monitors",
"ImageSrc": "../../../../images/products/12.png"
}, {
"ID": 13,
"Name": "DesktopLCD 19",
"Price": 160,
"Current_Inventory": 150,
"Backorder": 0,
"Manufacturing": 210,
"Category": "Monitors",
"ImageSrc": "../../../../images/products/13.png"
}, {
"ID": 14,
"Name": "Projector Plus",
"Price": 550,
"Current_Inventory": null,
"Backorder": 55,
"Manufacturing": 10,
"Category": "Projectors",
"ImageSrc": "../../../../images/products/14.png"
}, {
"ID": 15,
"Name": "Projector PlusHD",
"Price": 750,
"Current_Inventory": 110,
"Backorder": 0,
"Manufacturing": 90,
"Category": "Projectors",
"ImageSrc": "../../../../images/products/15.png"
}, {
"ID": 17,
"Name": "ExcelRemote IR",
"Price": 150,
"Current_Inventory": 650,
"Backorder": 0,
"Manufacturing": 190,
"Category": "Automation",
"ImageSrc": "../../../../images/products/17.png"
}, {
"ID": 18,
"Name": "ExcelRemote BT",
"Price": 180,
"Current_Inventory": 310,
"Backorder": 0,
"Manufacturing": 0,
"Category": "Automation",
"ImageSrc": "../../../../images/products/18.png"
}, {
"ID": 19,
"Name": "ExcelRemote IP",
"Price": 200,
"Current_Inventory": 0,
"Backorder": 325,
"Manufacturing": 225,
"Category": "Automation",
"ImageSrc": "../../../../images/products/19.png"
}];