Your search did not match any results.
TagBox

Grouped Items

Documentation
The TagBox widget allows you to group items within the drop-down list. This demo illustrates how to enable grouping and how to define a custom template for groups.
Copy to CodePen
Apply
Reset
window.onload = function() { var products = new DevExpress.data.DataSource({ store: productsData, key: "id", group: "Category" }); var viewModel = { TagBoxOptions: { dataSource: products, valueExpr: "ID", value: [productsData[16].ID, productsData[18].ID], grouped: true, displayExpr: "Name" }, searchTagBoxOptions: { dataSource: products, valueExpr: "ID", value: [productsData[16].ID, productsData[18].ID], searchEnabled: true, grouped: true, displayExpr: "Name" }, templateTagBoxOptions: { dataSource: products, valueExpr: "ID", value: [productsData[17].ID], grouped: true, groupTemplate: "group", displayExpr: "Name" } }; ko.applyBindings(viewModel, document.getElementById("select-box-demo")); };
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"/> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="select-box-demo"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Grouped items</div> <div class="dx-field-value"> <div data-bind="dxTagBox: TagBoxOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Grouped items with search enabled</div> <div class="dx-field-value"> <div data-bind="dxTagBox: searchTagBoxOptions"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Grouped items with a custom group template</div> <div class="dx-field-value"> <div data-bind="dxTagBox: templateTagBoxOptions"> <div data-options="dxTemplate: {name: 'group'}"> <div class='custom-icon'> <span class='dx-icon-box icon'></span> <span data-bind="text: key"></span> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
.custom-icon .icon { font-size: 17px; color: #f05b41; margin-right: 2px; }
var productsData = [{ "ID": 1, "Name": "HD Video Player", "Category": "Video Players" }, { "ID": 2, "Name": "SuperHD Player", "Category": "Video Players" }, { "ID": 3, "Name": "SuperPlasma 50", "Category": "Televisions" }, { "ID": 4, "Name": "SuperLED 50", "Category": "Televisions" }, { "ID": 5, "Name": "SuperLED 42", "Category": "Televisions" }, { "ID": 6, "Name": "SuperLCD 55", "Category": "Televisions" }, { "ID": 7, "Name": "SuperLCD 42", "Category": "Televisions" }, { "ID": 8, "Name": "SuperPlasma 65", "Category": "Televisions" }, { "ID": 9, "Name": "SuperLCD 70", "Category": "Televisions" }, { "ID": 10, "Name": "DesktopLED 21", "Category": "Monitors" }, { "ID": 11, "Name": "DesktopLED 19", "Category": "Monitors" }, { "ID": 12, "Name": "DesktopLCD 21", "Category": "Monitors" }, { "ID": 13, "Name": "DesktopLCD 19", "Category": "Monitors" }, { "ID": 14, "Name": "Projector Plus", "Category": "Projectors" }, { "ID": 15, "Name": "Projector PlusHD", "Category": "Projectors" }, { "ID": 16, "Name": "Projector PlusHT", "Category": "Projectors" }, { "ID": 17, "Name": "ExcelRemote IR", "Category": "Automation" }, { "ID": 18, "Name": "ExcelRemote BT", "Category": "Automation" }, { "ID": 19, "Name": "ExcelRemote IP", "Category": "Automation" }];