Free Trial Buy
    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 contains ungrouped data items, use the DataSource's group property to specify the data field to group by. This case is illustrated in this demo's first and third SelectBoxes.

    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 and items field mappings as in this demo's second SelectBox.

    NOTE

    Only one-level grouping is supported.

    Regardless of the data source structure, enable the grouped property.

    If the data source contains objects, specify the following SelectBox properties:

    • valueExpr
      A data field that contains unique values used to identify items.

    • displayExpr
      A data field whose values should be displayed in the drop-down list.

    If you need to specify a custom template for group captions, use the groupTemplate property. In this demo, each caption contains an icon and a text string.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { const fromUngroupedData = new DevExpress.data.DataSource({ store: { type: 'array', data: ungroupedData, key: 'ID', }, group: 'Category', }); const fromPregroupedData = new DevExpress.data.DataSource({ store: { type: 'array', data: pregroupedData, key: 'ID', }, map(item) { item.key = item.Category; item.items = item.Products; return item; }, }); fromPregroupedData.load(); $('#selectbox-ungroupeddata').dxSelectBox({ dataSource: fromUngroupedData, valueExpr: 'ID', grouped: true, displayExpr: 'Name', value: 1, }); $('#selectbox-pregroupeddata').dxSelectBox({ dataSource: fromPregroupedData, valueExpr: 'ID', grouped: true, displayExpr: 'Name', value: 1, }); $('#selectbox-template').dxSelectBox({ dataSource: fromUngroupedData, valueExpr: 'ID', grouped: true, groupTemplate(data) { return $(`<div class='custom-icon'><span class='dx-icon-box icon'></span> ${data.key}</div>`); }, displayExpr: 'Name', value: 1, }); });
    <!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.5.1/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/22.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.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 class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Data grouped in the DataSource</div> <div class="dx-field-value"> <div id="selectbox-ungroupeddata"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Pre-grouped data</div> <div class="dx-field-value"> <div id="selectbox-pregroupeddata"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom group template</div> <div class="dx-field-value"> <div id="selectbox-template"></div> </div> </div> </div> </div> </body> </html>
    .custom-icon .icon { font-size: 17px; color: #f05b41; margin-right: 2px; }
    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', }]; 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', }], }];