$(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.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/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.6/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"
}];