ComboBox with HTML Content

The ComboBox allows you to customize the display of the items in the drop-down list. This sample applies custom HTML to each item in the dropdown, providing more information to the end user and the selection.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // define template for the details var template = '<div class="item">' + '<h1>{name}</h1>' + '<b>{city}</b> ({state})<br/>' + '{address}<br/>' + 'Phone: <b>{phone}</b><br/>' + 'Fax: <b>{fax}</b><br/>' + 'Website: <a href="{site}" target="_blank">{site}</a><br/>' + '</div>'; // // show items in a ComboBox let theCombo = new input.ComboBox('#theCombo', { displayMemberPath: 'name', headerPath: 'name', itemsSource: getData(), formatItem: (sender, e) => { let html = wijmo.format(template, e.data, (data, name, fmt, val) => { return wijmo.isString(data[name]) ? wijmo.escapeHtml(data[name]) : val; }); e.item.innerHTML = html; } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ComboBox with HTML Content</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"> <p> This ComboBox uses a <b>formatItem</b> event to customize the display of the items in the drop-down list. </p> <div id="theCombo"></div> </div> </body> </html> // some data to show in our accordion export function getData() { return [{ name: 'Electro Mart', city: 'Accident', state: 'Maryland', address: '8785 Windfall St.', phone: '(800) 555-1234', fax: '(800) 555-5678', site: 'https://www.electromartnot.com' }, { name: 'Sue\'s Depot', city: 'Big Arm', state: 'Montana', address: '77 Winchester Lane', phone: '(800) 555-2345', fax: '(800) 555-6789', site: 'https://www.suesdepotnot.com' }, { name: 'D&K Digital Locker', city: 'Chicken', state: 'Alaska', address: '787 Lakeview St. ', phone: '(800) 555-3456', fax: '(800) 555-7890', site: 'https://www.digilockernot.com' }, { name: 'Paul\'s Pub & Bistro', city: 'Coupon', state: 'Pennsylvania', address: '711 Old York Drive ', phone: '(800) 555-0987', fax: '(800) 555-6543', site: 'https://www.paulspubnot.com' }, { name: 'Amazing Deals Inc', city: 'Cut And Shoot', state: 'Texas', address: '91 Beech St.', phone: '(800) 955-2109', fax: '(800) 955-8765', site: 'https://www.amazingdealsnot.com' }]; } body { margin-bottom: 24pt; } .item { margin: 8px; font-size: 80%; } .wj-listbox-item h1 { font-size: 12pt; font-weight: bold; margin: 4px -8px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule, Inject } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], providers: [DataService], 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 ComboBox with HTML Content</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"> <p> This ComboBox uses a <b>wjItemTemplate</b> directive to customize the display of the items in the drop-down list. </p> <wj-combo-box [displayMemberPath]="'name'" [headerPath]="'name'" [itemsSource]="data"> <ng-template wjItemTemplate let-item="item" let-itemIndex="itemIndex"> <div class="item"> <h1>{{item.name}}</h1> <b>{{item.city}}</b> ({{item.state}})<br/> {{item.address}}<br/> Phone: <b>{{item.phone}}</b><br/> Fax: <b>{{item.fax}}</b><br/> Website: <a href="{{item.site}}" target="_blank">{{item.site}}</a><br/> </div> </ng-template> </wj-combo-box> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { return [{ name: 'Electro Mart', city: 'Accident', state: 'Maryland', address: '8785 Windfall St.', phone: '(800) 555-1234', fax: '(800) 555-5678', site: 'https://www.electromartnot.com' }, { name: 'Sue\'s Depot', city: 'Big Arm', state: 'Montana', address: '77 Winchester Lane', phone: '(800) 555-2345', fax: '(800) 555-6789', site: 'https://www.suesdepotnot.com' }, { name: 'D&K Digital Locker', city: 'Chicken', state: 'Alaska', address: '787 Lakeview St. ', phone: '(800) 555-3456', fax: '(800) 555-7890', site: 'https://www.digilockernot.com' }, { name: 'Paul\'s Pub & Bistro', city: 'Coupon', state: 'Pennsylvania', address: '711 Old York Drive ', phone: '(800) 555-0987', fax: '(800) 555-6543', site: 'https://www.paulspubnot.com' }, { name: 'Amazing Deals Inc', city: 'Cut And Shoot', state: 'Texas', address: '91 Beech St.', phone: '(800) 955-2109', fax: '(800) 955-8765', site: 'https://www.amazingdealsnot.com' }]; } } body { margin-bottom: 24pt; } .item { margin: 8px; font-size: 80%; } .wj-listbox-item h1 { font-size: 12pt; font-weight: bold; margin: 4px -8px; } <template> <div class="container-fluid"> <p> This ComboBox uses a <b>formatItem</b> event to customize the display of the items in the drop-down list. </p> <wj-combo-box :displayMemberPath="'name'" :headerPath="'name'" :itemsSource="data" :format-item="formatItem"> </wj-combo-box> </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'; import * as wijmo from '@grapecity/wijmo'; import { getData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), comboTableItemTemplate: '<div class="item">' + '<h1>{name}</h1>' + '<b>{city}</b> ({state})<br/>' + '{address}<br/>' + 'Phone: <b>{phone}</b><br/>' + 'Fax: <b>{fax}</b><br/>' + 'Website: <a href="{site}" target="_blank">{site}</a><br/>' + '</div>' } }, methods: { formatItem: function(sender, e){ let html = wijmo.format(this.comboTableItemTemplate, e.data, (data, name, fmt, val) => { return wijmo.isString(data[name]) ? wijmo.escapeHtml(data[name]) : val; }); e.item.innerHTML = html; } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24pt; } .item { margin: 8px; font-size: 80%; } .wj-listbox-item h1 { font-size: 12pt; font-weight: bold; margin: 4px -8px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ComboBox with HTML Content</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> // some data to show in our accordion export function getData() { return [{ name: 'Electro Mart', city: 'Accident', state: 'Maryland', address: '8785 Windfall St.', phone: '(800) 555-1234', fax: '(800) 555-5678', site: 'https://www.electromartnot.com' }, { name: 'Sue\'s Depot', city: 'Big Arm', state: 'Montana', address: '77 Winchester Lane', phone: '(800) 555-2345', fax: '(800) 555-6789', site: 'https://www.suesdepotnot.com' }, { name: 'D&K Digital Locker', city: 'Chicken', state: 'Alaska', address: '787 Lakeview St. ', phone: '(800) 555-3456', fax: '(800) 555-7890', site: 'https://www.digilockernot.com' }, { name: 'Paul\'s Pub & Bistro', city: 'Coupon', state: 'Pennsylvania', address: '711 Old York Drive ', phone: '(800) 555-0987', fax: '(800) 555-6543', site: 'https://www.paulspubnot.com' }, { name: 'Amazing Deals Inc', city: 'Cut And Shoot', state: 'Texas', address: '91 Beech St.', phone: '(800) 955-2109', fax: '(800) 955-8765', site: 'https://www.amazingdealsnot.com' }]; } 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'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <p> This ComboBox uses a <b>wjItemTemplate</b> <i>render prop</i> to customize the display of the items in the drop-down list. </p> <wjInput.ComboBox displayMemberPath="name" headerPath="name" itemsSource={this.state.data} wjItemTemplate={(context) => (<div className="item"> <h1>{context.item.name}</h1> <b>{context.item.city}</b> ({context.item.state})<br /> {context.item.address}<br /> Phone: <b>{context.item.phone}</b><br /> Fax: <b>{context.item.fax}</b><br /> Website: <a href="{context.item.site}" target="_blank">{context.item.site}</a><br /> </div>)}> </wjInput.ComboBox> </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>GrapeCity ComboBox with HTML Content</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> body { margin-bottom: 24pt; } .item { margin: 8px; font-size: 80%; } .wj-listbox-item h1 { font-size: 12pt; font-weight: bold; margin: 4px -8px; } export function getData() { return [{ name: 'Electro Mart', city: 'Accident', state: 'Maryland', address: '8785 Windfall St.', phone: '(800) 555-1234', fax: '(800) 555-5678', site: 'https://www.electromartnot.com' }, { name: 'Sue\'s Depot', city: 'Big Arm', state: 'Montana', address: '77 Winchester Lane', phone: '(800) 555-2345', fax: '(800) 555-6789', site: 'https://www.suesdepotnot.com' }, { name: 'D&K Digital Locker', city: 'Chicken', state: 'Alaska', address: '787 Lakeview St. ', phone: '(800) 555-3456', fax: '(800) 555-7890', site: 'https://www.digilockernot.com' }, { name: 'Paul\'s Pub & Bistro', city: 'Coupon', state: 'Pennsylvania', address: '711 Old York Drive ', phone: '(800) 555-0987', fax: '(800) 555-6543', site: 'https://www.paulspubnot.com' }, { name: 'Amazing Deals Inc', city: 'Cut And Shoot', state: 'Texas', address: '91 Beech St.', phone: '(800) 955-2109', fax: '(800) 955-8765', site: 'https://www.amazingdealsnot.com' }]; }