Formatting Items in ListBox

The ListBox allows you to customize the display of the items in the list. This sample adds 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"> <p> This ListBox uses a <b>formatItem</b> event to customize the display of the items in the list. </p> </div> <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']; } // @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"> <p> This ListBox uses a <b>wjItemTemplate</b> directive to customize the display of the items in the list. </p> </div> <div class="row"> <div class="col-xs-4"> <wj-list-box #theListBox [itemsSource]="glyphs"> <ng-template wjItemTemplate let-item="item" let-itemIndex="itemIndex"> <div class="wj-glyph"> <span class="wj-glyph-{{item}}"></span> </div>{{item}} </ng-template> </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"> <p> This ListBox uses a <b>formatItem</b> event to customize the display of the items in the list. </p> </div> <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.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"> <p> This ListBox uses a <b>wjItemTemplate</b> <i>render prop</i> to customize the display of the items in the list. </p> </div> <div className="row"> <div className="col-xs-4"> <wjInput.ListBox displayMemberPath="country" itemsSource={this.state.glyphs} selectedIndexChanged={this.onSelectedIndexChanged} initialized={this.onInitialized} wjItemTemplate={(context) => (<div> <div className="wj-glyph"> <span className={`wj-glyph-${context.item}`}></span> </div> {context.item} </div>)}> </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; }