Vue SelectBox - Customize Group Headers

By default, group headers display text of the key field in a bold font. If you need a more flexible solution, specify groupTemplate.

jQuery
JavaScript
const fruitsVegetables = [{
    // ...
}];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            store: fruitsVegetables,
            map: function(groupedItem) {
                let overallCount = 0;
                groupedItem.items.forEach(function(item) {
                    overallCount += item.count;
                });
                return $.extend(groupedItem, { overallCount: overallCount })
            }
        }),
        grouped: true,
        groupTemplate: function(groupData, _, groupElement) {
            groupElement.append(
                $("<p>").text(groupData.key + " | Count: " + groupData.overallCount)
            )
        },
        displayExpr: 'name',
        valueExpr: 'count'
    });
});
Angular
HTML
TypeScript
<dx-select-box
    [dataSource]="selectBoxDataSource"
    [grouped]="true"
    groupTemplate="group"
    displayExpr="name"
    valueExpr="count">
    <div *dxTemplate="let data of 'group'">
        <p>{{data.key}} | Count: {{data.overallCount}}</p>
    </div>
</dx-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
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 }
        ]
    }];
    selectBoxDataSource = new DataSource({
        store: this.fruitsVegetables,
        map: function(groupedItem) {
            let overallCount = 0;
            groupedItem.items.forEach(function(item) {
                overallCount += item.count;
            })
            return Object.assign(groupedItem, { overallCount: overallCount });
        }
    });
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxDataSource"
        :grouped="true"
        display-expr="name"
        value-expr="count"
        group-template="group"
    >
        <template #group="{ data }">
            <p>
                {{ data.key + ' | Count: ' + data.overallCount }}
            </p>
        </template>
    </DxSelectBox>
</template>

<script>
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 = [{
            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 }
            ]
        }];
        const selectBoxDataSource = new DataSource({
            store: fruitsVegetables,
            map: function(groupedItem) {
                let overallCount = 0;
                groupedItem.items.forEach(function(item) {
                    overallCount += item.count;
                })
                return Object.assign(groupedItem, { overallCount: overallCount });
            }
        });

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

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

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 }
    ]
}];
const selectBoxDataSource = new DataSource({
    store: fruitsVegetables,
    map: function(groupedItem) {
        let overallCount = 0;
        groupedItem.items.forEach(function(item) {
            overallCount += item.count;
        })
        return Object.assign(groupedItem, { overallCount: overallCount });
    }
});

const renderGroup = (data) => {
    return (
        <p>
            {data.key + ' | Count: ' + data.overallCount}
        </p>
    );
}

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

View Demo

See Also