Your search did not match any results.
Documentation

This demo shows how to filter data in the List using the FilterBuilder widget. Here, the FilterBuilder provides a set of built-in filter operations, as well as a custom "anyof" operation which is implemented in the customOperations array. A condition with this operation evaluates to true if the data field contains any value from the list. Note that the calculateFilterExpression function converts the «anyof» operation into a set of operations supported by the DataSource. This operation is available only for the "Category" field because it is specified in the field’s filterOperations array.

Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { var filterBuilderInstance; $scope.listFilter = null; $scope.categories = categories; $scope.filterBuilderOptions = { fields: fields, value: filter, customOperations: [{ name: "anyof", caption: "Is any of", icon: "check", editorTemplate: "tagBoxTemplate", calculateFilterExpression: function(filterValue, field) { if(filterValue && filterValue.length > 0) { var result = [], lastIndex = filterValue.length - 1; filterValue.forEach(function(value, index) { result.push([field.dataField, "=", value]); if(index !== lastIndex) { result.push("or"); } }); return result; } } }], onInitialized: function(e) { filterBuilderInstance = e.component; $scope.listFilter = filterBuilderInstance.getFilterExpression(); } }; $scope.onTagBoxValueChanged = function(e) { e.model.data.setValue(e.value); }; $scope.buttonOptions = { text: "Apply Filter", type: "default", onClick: function() { $scope.listFilter = filterBuilderInstance.getFilterExpression(); }, }; $scope.listOptions = { dataSource: { store: products }, height: "100%", bindingOptions: { "dataSource.filter": "listFilter" } }; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.win10.white.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://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/18.1.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" ng-app="DemoApp" ng-controller="DemoController"> <div class="filter-container"> <div dx-filter-builder="filterBuilderOptions" dx-item-alias="data"> <div data-options="dxTemplate: {name: 'tagBoxTemplate'}" dx-tag-box="{ value: data.value, items: categories, onValueChanged: onTagBoxValueChanged, width: 'auto' }"> </div> </div> <div dx-button="buttonOptions"></div> </div> <div class="list-container"> <div dx-list="listOptions" dx-item-alias="product"> <div data-options="dxTemplate: {name: 'item'}"> <div class="product"> <img ng-src="{{product.ImageSrc}}" /> <div>{{product.Name}}</div> <div class="price"> {{product.Price | currency:undefined:0}} </div> </div> </div> </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-tagbox { min-width: 150px; } .dx-filterbuilder .dx-numberbox { width: 80px; }
var filter = [ ["Category", "anyof", ["Video Players", "Automation"]], "or", [ ["Category", "anyof", ["Monitors", "Projectors"]], "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", filterOperations: ["=", "anyof"], 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" }];