React SelectBox - In the Data Source

Items in the SelectBox can be grouped if they are grouped in the data source. The SelectBox recognizes a group when it finds an object with the key and items fields. The key is the group header, the items are items that fall into the group. For example, the fruitsVegetables array from the following code produces two groups with three items each. Note that the SelectBox needs to be informed that it deals with grouped data, therefore its grouped property is set to true.

jQuery
JavaScript
const fruitsVegetables = [{
    key: "Fruits",
    items: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    key: "Vegetables",
    items: [
        { name: "Potatoes", count: 5 },
        { name: "Tomatoes", count: 9 },
        { name: "Turnips", count: 8 }
    ]
}];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: fruitsVegetables,
        grouped: true,
        displayExpr: 'name',
        valueExpr: 'count'
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruitsVegetables = [{
        key: "Fruits",
        items: [
            { name: "Apples", count: 10 },
            { name: "Oranges", count: 12 },
            { name: "Lemons", count: 15 }
        ]
    }, {
        key: "Vegetables",
        items: [
            { name: "Potatoes", count: 5 },
            { name: "Tomatoes", count: 9 },
            { name: "Turnips", count: 8 }
        ]
    }];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="fruitsVegetables"
    [grouped]="true"
    displayExpr="name"
    valueExpr="count">
</dx-select-box>
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="fruitsVegetables"
        :grouped="true"
        display-expr="name"
        value-expr="count"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';

export default {
    components: {
        DxSelectBox
    },
    data() {
        const fruitsVegetables = [{
            key: "Fruits",
            items: [
                { name: "Apples", count: 10 },
                { name: "Oranges", count: 12 },
                { name: "Lemons", count: 15 }
            ]
        }, {
            key: "Vegetables",
            items: [
                { name: "Potatoes", count: 5 },
                { name: "Tomatoes", count: 9 },
                { name: "Turnips", count: 8 }
            ]
        }];
        return {
            fruitsVegetables
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';

const fruitsVegetables = [{
    key: "Fruits",
    items: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    key: "Vegetables",
    items: [
        { name: "Potatoes", count: 5 },
        { name: "Tomatoes", count: 9 },
        { name: "Turnips", count: 8 }
    ]
}];

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={fruitsVegetables}
                grouped="true"
                displayExpr="name"
                valueExpr="count"
            />
        );
    }
}
export default App;
NOTE
Only one-level grouping is supported.

If objects in your data source miss the key and items fields, use the map function of the DevExtreme DataSource to create key + items field mappings. You can find more information on the map function in the Data Layer - Item Mapping topic.

jQuery
JavaScript
const fruitsVegetables = [{
    type: "Fruits",
    collection: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    type: "Vegetables",
    collection: [
        { name: "Potatoes", count: 5 },
        { name: "Tomatoes", count: 9 },
        { name: "Turnips", count: 8 }
    ]
}];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            store: fruitsVegetables,
            map: function(item) {
                return {
                    key: item.type,
                    items: item.collection
                }
            }
        }),
        grouped: true,
        displayExpr: 'name',
        valueExpr: 'count'
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    fruitsVegetables = [{
        type: "Fruits",
        collection: [
            { name: "Apples", count: 10 },
            { name: "Oranges", count: 12 },
            { name: "Lemons", count: 15 }
        ]
    }, {
        type: "Vegetables",
        collection: [
            { name: "Potatoes", count: 5 },
            { name: "Tomatoes", count: 9 },
            { name: "Turnips", count: 8 }
        ]
    }];
    selectBoxDataSource = new DataSource({
        store: this.fruitsVegetables,
        map: function(item) {
            return {
                key: item.type,
                items: item.collection
            }
        }
    });
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="selectBoxDataSource"
    [grouped]="true"
    displayExpr="name"
    valueExpr="count">
</dx-select-box>
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxDataSource"
        :grouped="true"
        display-expr="name"
        value-expr="count"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';
import DataSource from "devextreme/data/data_source";

export default {
    components: {
        DxSelectBox
    },
    data() {
        const fruitsVegetables = [{
            type: "Fruits",
            collection: [
                { name: "Apples", count: 10 },
                { name: "Oranges", count: 12 },
                { name: "Lemons", count: 15 }
            ]
        }, {
            type: "Vegetables",
            collection: [
                { name: "Potatoes", count: 5 },
                { name: "Tomatoes", count: 9 },
                { name: "Turnips", count: 8 }
            ]
        }];
        const selectBoxDataSource = new DataSource({
            store: fruitsVegetables,
            map: function(item) {
                return {
                    key: item.type,
                    items: item.collection
                }
            }
        });

        return {
            selectBoxDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';
import DataSource from "devextreme/data/data_source";

const fruitsVegetables = [{
    type: "Fruits",
    collection: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    type: "Vegetables",
    collection: [
        { name: "Potatoes", count: 5 },
        { name: "Tomatoes", count: 9 },
        { name: "Turnips", count: 8 }
    ]
}];

const selectBoxDataSource = new DataSource({
    store: fruitsVegetables,
    map: function(item) {
        return {
            key: item.type,
            items: item.collection
        }
    }
});

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxDataSource}
                grouped="true"
                displayExpr="name"
                valueExpr="count"
            />
        );
    }
}
export default App;

If your data is not grouped, you can group it using the group property of the DataSource. See the Data Layer - Grouping topic for details.

jQuery
JavaScript
const fruitsVegetables = [
    { type: "Fruits", name: "Apples", count: 10 },
    { type: "Fruits", name: "Oranges", count: 12 },
    { type: "Fruits", name: "Lemons", count: 15 },
    { type: "Vegetables", name: "Potatoes", count: 5 },
    { type: "Vegetables", name: "Tomatoes", count: 9 },
    { type: "Vegetables", name: "Turnips", count: 8 }
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            store: fruitsVegetables,
            group: "type"
        }),
        grouped: true,
        displayExpr: 'name',
        valueExpr: 'count'
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    fruitsVegetables = [
        { type: "Fruits", name: "Apples", count: 10 },
        { type: "Fruits", name: "Oranges", count: 12 },
        { type: "Fruits", name: "Lemons", count: 15 },
        { type: "Vegetables", name: "Potatoes", count: 5 },
        { type: "Vegetables", name: "Tomatoes", count: 9 },
        { type: "Vegetables", name: "Turnips", count: 8 }
    ];
    selectBoxDataSource = new DataSource({
        store: this.fruitsVegetables,
        group: "type"
    });
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="selectBoxDataSource"
    [grouped]="true"
    displayExpr="name"
    valueExpr="count">
</dx-select-box>
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxDataSource"
        :grouped="type"
        display-expr="name"
        value-expr="count"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';
import DataSource from "devextreme/data/data_source";

export default {
    components: {
        DxSelectBox
    },
    data() {
        const fruitsVegetables = [
            { type: "Fruits", name: "Apples", count: 10 },
            { type: "Fruits", name: "Oranges", count: 12 },
            { type: "Fruits", name: "Lemons", count: 15 },
            { type: "Vegetables", name: "Potatoes", count: 5 },
            { type: "Vegetables", name: "Tomatoes", count: 9 },
            { type: "Vegetables", name: "Turnips", count: 8 }
        ];
        const selectBoxDataSource = new DataSource({
            store: fruitsVegetables,
            group: "type"
        });

        return {
            selectBoxDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';
import DataSource from "devextreme/data/data_source";

const fruitsVegetables = [
    { type: "Fruits", name: "Apples", count: 10 },
    { type: "Fruits", name: "Oranges", count: 12 },
    { type: "Fruits", name: "Lemons", count: 15 },
    { type: "Vegetables", name: "Potatoes", count: 5 },
    { type: "Vegetables", name: "Tomatoes", count: 9 },
    { type: "Vegetables", name: "Turnips", count: 8 }
];
const selectBoxDataSource = new DataSource({
    store: fruitsVegetables,
    group: "type"
});

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxDataSource}
                grouped="type"
                displayExpr="name"
                valueExpr="count"
            />
        );
    }
}
export default App;

View Demo

See Also