JavaScript/jQuery Filter Builder - With List

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

Was this demo helpful?

Thank you!

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!

Backend API

$(() => { const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, }); const filterBuilderInstance = $('#filterBuilder').dxFilterBuilder({ fields, value: filter, }).dxFilterBuilder('instance'); $('#listWidget').dxList({ dataSource: new DevExpress.data.DataSource({ store: products, filter: filterBuilderInstance.getFilterExpression(), }), height: '100%', itemTemplate(data) { const result = $('<div>').addClass('product'); $('<img>').attr('src', data.ImageSrc).attr('alt', `Picture of ${data.Name}`).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() { const filter = filterBuilderInstance.getFilterExpression(); const 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=5.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://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/event.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/supplemental.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/unresolved.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/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="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: 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: 45%; float: left; margin: 24px; 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; }