Angular 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;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.