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 property 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Data grouped in the DataSource</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="fromUngroupedData"
valueExpr="ID"
[grouped]="true"
displayExpr="Name"></dx-select-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Pre-grouped data</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="fromPregroupedData"
valueExpr="ID"
[grouped]="true"
displayExpr="Name"></dx-select-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom group template</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="fromUngroupedData"
valueExpr="ID"
[grouped]="true"
displayExpr="Name"
[searchEnabled]="true"
groupTemplate="group">
<div *dxTemplate="let data of 'group'">
<div class="custom-icon">
<span class="dx-icon-box icon"></span>
{{data.key}}
</div>
</div>
</dx-select-box>
</div>
</div>
</div>
import { NgModule, Component, enableProdMode } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';
import {
DxSelectBoxModule
} from 'devextreme-angular';
import {Product, Service} from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
fromUngroupedData: DataSource;
fromPregroupedData: DataSource;
constructor(service: Service) {
this.fromUngroupedData = new DataSource({
store: new ArrayStore({
data: service.getUngroupedData(),
key: "id"
}),
group: "Category"
});
this.fromPregroupedData = new DataSource({
store: new ArrayStore({
data: service.getPregroupedData(),
key: "id"
}),
map: function(item) {
item.key = item.Category;
item.items = item.Products;
return item;
}
});
}
}
@NgModule({
imports: [
BrowserModule,
DxSelectBoxModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .custom-icon .icon {
font-size: 17px;
color: #f05b41;
margin-right: 2px;
}
import {Injectable} from '@angular/core';
export class Product {
ID: number;
Name: string;
Category: string;
}
export class ProductGrouped {
ID: number;
Name: string;
}
export class CategoryGrouped {
Category: string;
Products: ProductGrouped[];
}
let ungroupedData: Product[] = [{
"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"
}];
let pregroupedData: CategoryGrouped[] = [{
"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"
}]
}];
@Injectable()
export class Service {
getUngroupedData(): Product[] {
return ungroupedData;
}
getPregroupedData(): CategoryGrouped[] {
return pregroupedData;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.2.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.27.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.1.3/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@21.1.3/bundles/dx.all.js',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.0.0/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.15',
'devexpress-gantt': 'npm:devexpress-gantt@2.1.31',
'devextreme-angular': 'npm:devextreme-angular@21.1.3',
'@devextreme/vdom': 'npm:@devextreme/vdom@1.2.1',
'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'@devextreme/vdom': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@devextreme/*/package.json",
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
};
System.config(window.config);
<!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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>