ListBox/ComboBox Grouping

Grouping is managed by the CollectionView class, but to enable the display of groups in Input contorls, like the ComboBox or ListBox, the control's showGroups property must be set to true. This will add group headers tot he dropdown. See sample below for example.

Learn about Input Controls | ComboBox Grouping Documentation | ComboBox API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@mescius/wijmo.input'; import * as wijmo from '@mescius/wijmo'; import { getCountryCode, getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // get grouped CollectionView let data = getData(); // // toggle showGroups let showGroups = true; document.getElementById('showGroups').addEventListener('click', e => { showGroups = e.target.checked; theComboBox.showGroups = showGroups; theListBox.showGroups = showGroups; }); // // toggle formatItem let formatGroupHeaders = true; document.getElementById('formatGroupHeaders').addEventListener('click', e => { formatGroupHeaders = e.target.checked; data.refresh(); }); // // toggle checkboxes document.getElementById('showCheckboxes').addEventListener('click', e => { theListBox.checkedMemberPath = e.target.checked ? 'checked' : ''; }); // // show in ComboBox let theComboBox = new input.ComboBox('#theComboBox', { showGroups: true, formatItem: formatGroupHeader, displayMemberPath: 'city', itemsSource: data }); // // show in ListBox let theListBox = new input.ListBox('#theListBox', { showGroups: true, formatItem: formatGroupHeader, displayMemberPath: 'city', itemsSource: data }); // // show a flag in the group headers function formatGroupHeader(sender, e) { if (formatGroupHeaders && e.index < 0 && e.data instanceof wijmo.CollectionViewGroup) { let group = e.data, code = getCountryCode(group.name); // if (code) { e.item.innerHTML = `<span class="flag-icon flag-icon-${code}"></span> ${group.name}`; } } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo ListBox/ComboBox Grouping</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label> Show Groups <input id="showGroups" type="checkbox" checked> </label> <label> Format Group Headers <input id="formatGroupHeaders" type="checkbox" checked> </label> <label> Show Checkboxes <input id="showCheckboxes" type="checkbox"> </label> <div class="row"> <div class="col-xs-6"> <h4> ComboBox </h4> <div id="theComboBox"></div> </div> <div class="col-xs-6"> <h4> ListBox </h4> <div id="theListBox"></div> </div> </div> </div> </body> </html>
import * as wijmo from '@mescius/wijmo'; // some data for the list/combo export function getData() { var arr = []; // addCities(arr, 'US', ['New York', 'Los Angeles', 'Chicago', 'Houston']); addCities(arr, 'Japan', ['Tokyo', 'Osaka', 'Kyoto', 'Sendai']); addCities(arr, 'UK', ['London', 'Birmingham', 'Manchester', 'Liverpool']); addCities(arr, 'China', ['Shanghai', 'Beijing', 'Tianjin', 'Shenzhen']); addCities(arr, 'Germany', ['Berlin', 'Hamburg', 'Munich', 'Cologne']); addCities(arr, 'France', ['Paris', 'Marseille', 'Lyon', 'Toulouse']); addCities(arr, 'Canada', ['Toronto', 'Ottawa', 'Vancouver', 'Montreal']); addCities(arr, 'Russia', ['Moscow', 'St Petersburg', 'Novosibirsk', 'Yekaterinburg']); // return new wijmo.CollectionView(arr, { sortDescriptions: ['country', 'city'], groupDescriptions: ['country'], currentItem: null }); } // export function getCountryCode(country) { switch (country) { case 'US': return 'us'; case 'Japan': return 'jp'; case 'UK': return 'gb'; case 'China': return 'cn'; case 'Germany': return 'de'; case 'France': return 'fr'; case 'Canada': return 'ca'; case 'Russia': return 'ru'; } // return null; } // function addCities(arr, country, cities) { cities.forEach(city => { arr.push({ country: country, city: city }); }); }
@import 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.css'; .wj-listbox { height: 200px; display: block; } .wj-listbox .wj-listbox-item { line-height: 2em; } .wj-listbox .wj-listbox-item.wj-header { opacity: 1; position: sticky; top: 0; } label { margin: 0 24px; } body { margin-bottom: 40px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);