Formatting Items in ListBox

The ListBox has a formatItem event you can use to customize the display of the items in the list. This sample uses the event to add inline HTML with glyphs to display them in the ListBox.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let theListBox = new input.ListBox('#theListBox', { formatItem: (sender, e) => { e.item.innerHTML = '<div class="wj-glyph">' + `<span class="wj-glyph-${e.data}"></span>` + `</div>${e.data}`; }, selectedIndexChanged: (sender) => { document.querySelector('#selectedItem').innerHTML = `<span class="wj-glyph-${sender.selectedItem}"></span>`; }, // Wijmo glyphs itemsSource: ['asterisk', 'calendar', 'check', 'circle', 'clock', 'diamond', 'down', 'down-left', 'down-right', 'file', 'filter', 'left', 'minus', 'pencil', 'plus', 'right', 'square', 'step-backward', 'step-forward', 'up', 'up-left', 'up-right'] }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ListBox formatItem</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <div id="theListBox"></div> </div> <div class="col-xs-8"> <h1 id="selectedItem"></h1> </div> </div> </div> </body> </html> .wj-listbox { max-height: 150px; } .wj-listbox .wj-glyph { display: inline-block; width: 2em; text-align: center; } .wj-listbox .wj-listbox-item:not(.wj-state-selected) .wj-glyph { color: navy; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { glyphs = ['asterisk', 'calendar', 'check', 'circle', 'clock', 'diamond', 'down', 'down-left', 'down-right', 'file', 'filter', 'left', 'minus', 'pencil', 'plus', 'right', 'square', 'step-backward', 'step-forward', 'up', 'up-left', 'up-right']; // formatItem(e: input.FormatItemEventArgs) { e.item.innerHTML = '<div class="wj-glyph">' + `<span class="wj-glyph-${e.data}"></span>` + `</div>${e.data}`; } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ListBox formatItem</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <wj-list-box #theListBox [itemsSource]="glyphs" (formatItem)="formatItem($event)"></wj-list-box> </div> <div class="col-xs-8"> <h1> <span class="wj-glyph-{{theListBox.selectedItem}}"></span> </h1> </div> </div> </div> .wj-listbox { max-height: 150px; } .wj-listbox .wj-glyph { display: inline-block; width: 2em; text-align: center; } .wj-listbox .wj-listbox-item:not(.wj-state-selected) .wj-glyph { color: navy; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <wj-list-box :itemsSource="glyphs" :formatItem="onFormatItem" :selectedIndexChanged="onSelectedIndexChanged" :initialized="onInitialized"> </wj-list-box> </div> <div class="col-xs-8"> <h1> <span v-bind:class="'wj-glyph-'+ selectedItem"></span> </h1> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; new Vue({ el: '#app', data: { glyphs: ['asterisk', 'calendar', 'check', 'circle', 'clock', 'diamond', 'down', 'down-left', 'down-right', 'file', 'filter', 'left', 'minus', 'pencil', 'plus', 'right', 'square', 'step-backward', 'step-forward', 'up', 'up-left', 'up-right'], selectedItem: 'asterisk' }, methods: { onSelectedIndexChanged(sender) { this.selectedItem = sender.selectedValue; }, onInitialized(sender) { this.listBox = sender; }, onFormatItem(sender, e) { e.item.innerHTML = '<div class="wj-glyph">' + `<span class="wj-glyph-${e.data}"></span>` + `</div>${e.data}`; } }, mounted() { // To make the formatItem event work this.listBox.invalidate(); } }); </script> <style> .container-fluid .wj-listbox { max-height: 150px; } .container-fluid .wj-listbox .wj-glyph { display: inline-block; width: 2em; text-align: center; } .container-fluid .wj-listbox .wj-listbox-item:not(.wj-state-selected) .wj-glyph { color: navy; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ListBox formatItem</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor(props) { super(props); this.onInitialized = (listBox) => { this.setState({ listBox: listBox }); listBox.invalidate(); }; this.onFormatItem = (sender, e) => { e.item.innerHTML = '<div class="wj-glyph">' + `<span class="wj-glyph-${e.data}"></span>` + `</div>${e.data}`; }; this.onSelectedIndexChanged = (sender) => { this.setState({ selectedItem: sender.selectedValue }); }; this.state = { glyphs: ['asterisk', 'calendar', 'check', 'circle', 'clock', 'diamond', 'down', 'down-left', 'down-right', 'file', 'filter', 'left', 'minus', 'pencil', 'plus', 'right', 'square', 'step-backward', 'step-forward', 'up', 'up-left', 'up-right'], selectedItem: 'asterisk', listBox: {} }; } render() { return <div className="container-fluid"> <div className="row"> <div className="col-xs-4"> <wjInput.ListBox displayMemberPath="country" itemsSource={this.state.glyphs} formatItem={this.onFormatItem} selectedIndexChanged={this.onSelectedIndexChanged} initialized={this.onInitialized}> </wjInput.ListBox> </div> <div className="col-xs-8"> <h1> <span className={'wj-glyph-' + this.state.selectedItem}></span> </h1> </div> </div> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-listbox { max-height: 150px; } .wj-listbox .wj-glyph { display: inline-block; width: 2em; text-align: center; } .wj-listbox .wj-listbox-item:not(.wj-state-selected) .wj-glyph { color: navy; } body { margin-bottom: 24pt; }