Your search did not match any results.
Select Box

Grouped Items

Data items in the SelectBox's drop-down list can be organized in groups.

If the data source provides data items ungrouped, use the DataSource's group option to specify the data field to group by. This case is illustrated in this demo.

The SelectBox can also work with initially grouped data items. In this case, the data array should contain objects with the key and items fields:

let dataSource = [{
    key: "Group 1", // Group caption 
    items: [ // Items in Group 1
        { /* ... */ },
        { /* ... */ }
    ]
}, {
    key: "Group 2",
    items: [
        { /* ... */ },
        { /* ... */ }
    ]
}];

If data objects are grouped but use other field names, implement the DataSource's map function to create key + items field mappings.

NOTE

Subgroups are not supported.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import { SelectBox } from 'devextreme-react/select-box'; import DataSource from 'devextreme/data/data_source'; import Group from './Group.js'; import { ungroupedData, pregroupedData } from './data.js'; const fromUngroupedData = new DataSource({ store: ungroupedData, key: 'ID', group: 'Category' }); const fromPregroupedData = new DataSource({ store: pregroupedData, map: function(item) { item.key = item.Category; item.items = item.Products; return item; } }); class App extends React.Component { render() { return ( <div className={'dx-fieldset'}> <div className={'dx-field'}> <div className={'dx-field-label'}>Data grouped in the DataSource</div> <div className={'dx-field-value'}> <SelectBox dataSource={fromUngroupedData} valueExpr={'ID'} grouped={true} displayExpr={'Name'} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Pre-grouped data</div> <div className={'dx-field-value'}> <SelectBox dataSource={fromPregroupedData} valueExpr={'ID'} grouped={true} displayExpr={'Name'} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Custom group template</div> <div className={'dx-field-value'}> <SelectBox dataSource={fromUngroupedData} valueExpr={'ID'} grouped={true} displayExpr={'Name'} groupRender={Group} /> </div> </div> </div> ); } } export default App;
import React from 'react'; export default function Group({ key }) { return ( <div className={'custom-icon'}> <span className={'dx-icon-box icon'}></span>{' '} {key} </div> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.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" /> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.custom-icon .icon { font-size: 17px; color: #f05b41; margin-right: 2px; }
export const ungroupedData = [{ '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' }]; export const pregroupedData = [{ 'Category': 'Video Players', 'Products': [{ 'ID': 1, 'Name': 'HD Video Player' }, { 'ID': 2, 'Name': 'SuperHD Player' }], }, { 'Category': 'Televisions', 'Products': [{ 'ID': 3, 'Name': 'SuperPlasma 50' }, { 'ID': 4, 'Name': 'SuperLED 50' }, { 'ID': 5, 'Name': 'SuperLED 42' }, { 'ID': 6, 'Name': 'SuperLCD 55' }, { 'ID': 7, 'Name': 'SuperLCD 42' }, { 'ID': 8, 'Name': 'SuperPlasma 65' }, { 'ID': 9, 'Name': 'SuperLCD 70' }] }, { 'Category': 'Monitors', 'Products': [{ 'ID': 10, 'Name': 'DesktopLED 21' }, { 'ID': 11, 'Name': 'DesktopLED 19' }, { 'ID': 12, 'Name': 'DesktopLCD 21' }, { 'ID': 13, 'Name': 'DesktopLCD 19' }] }, { 'Category': 'Projectors', 'Products': [{ 'ID': 14, 'Name': 'Projector Plus' }, { 'ID': 15, 'Name': 'Projector PlusHD' }, { 'ID': 16, 'Name': 'Projector PlusHT' }] }, { 'Category': 'Automation', 'Products': [{ 'ID': 17, 'Name': 'ExcelRemote IR' }, { 'ID': 18, 'Name': 'ExcelRemote BT' }, { 'ID': 19, 'Name': 'ExcelRemote IP' }] }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });