ComboBox with Objects

The ComboBox can be bound to an object array, but to display the right item in the object, you should set the displayMemberPath to the name of the property to display in the ComboBox's drop down. This sample displays the values for the selectedIndex, selectedValue, or text properties based on the selected object as user changes selection.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as wijmo from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // select an item let theCombo = new input.ComboBox('#theCombo', { selectedIndexChanged: (sender) => { setText('theComboText', sender.text); setText('theComboIndex', sender.selectedIndex); setText('theComboValue', wijmo.Globalize.format(sender.selectedValue, 'c')); }, displayMemberPath: 'country', selectedValuePath: 'sales', itemsSource: getData() }); // // show text in an element on the page function setText(id, value) { document.getElementById(id).textContent = value; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ComboBox with Objects</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="form-group"> <label for="theCombo">Select an item:</label> <div id="theCombo"></div> </div> <p> The current text is: <b id="theComboText"></b>. </p> <p> The selectedIndex is: <b id="theComboIndex"></b>. </p> <p> The selectedValue is: <b id="theComboValue"></b>. </p> </div> </body> </html> export function getData() { // create some random data let countries = ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], active: i % 5 != 0, sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; } body { margin-bottom: 24px; } label { margin-right: 3px; } 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 Objects</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="form-group"> <label for="theCombo">Select an item:</label> <wj-combo-box #theCombo id="theCombo" [displayMemberPath]="'country'" [selectedValuePath]="'sales'" [itemsSource]="data"></wj-combo-box> </div> <p> The current text is: <b>{{ theCombo.text }}</b>. </p> <p> The selectedIndex is: <b>{{ theCombo.selectedIndex }}</b>. </p> <p> The selectedValue is: <b>{{ theCombo.selectedValue | currency }}</b>. </p> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { // create some random data let countries = ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], active: i % 5 != 0, sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; } } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <label for="theCombo">Select an item:</label> <wj-combo-box id="theCombo" :displayMemberPath="'country'" :selectedValuePath="'sales'" :itemsSource="data" :initialized="initCombo"></wj-combo-box> </div> <p> The current text is: <b>{{ theCombo.text }}</b>. </p> <p> The selectedIndex is: <b>{{ theCombo.selectedIndex }}</b>. </p> <p> The selectedValue is: <b>{{ theCombo.selectedValue | formatCurrency }}</b>. </p> </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 { getData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { theCombo: {}, data: getData() } }, methods: { initCombo: function(combo) { this.theCombo = combo; } }, filters: { formatCurrency: function(number){ return wijmo.Globalize.format(number, 'c'); } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ComboBox with Objects</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> export function getData() { // create some random data let countries = ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], active: i % 5 != 0, sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; } 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 wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this._data = getData(); this.state = { text: null, index: null, value: null }; } render() { return <div className="container-fluid"> <div className="form-group"> <label htmlFor="theCombo">Select an item:</label> <wjInput.ComboBox id="theCombo" displayMemberPath="country" selectedValuePath="sales" itemsSource={this._data} initialized={this._initCombo.bind(this)} selectedIndexChanged={this._onSelectedIndexChanged.bind(this)}> </wjInput.ComboBox> </div> <p> The current text is: <b>{this.state.text}</b>. </p> <p> The selectedIndex is: <b>{this.state.index}</b>. </p> <p> The selectedValue is: <b>{this._formatCurrency(this.state.value)}</b>. </p> </div>; } _initCombo(sender) { this.setState({ text: sender.text, index: sender.selectedIndex, value: sender.selectedValue }); } _formatCurrency(number) { return wijmo.Globalize.format(number, 'c'); } _onSelectedIndexChanged(sender) { this.setState({ text: sender.text, index: sender.selectedIndex, value: sender.selectedValue, }); } } 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 Objects</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: 24px; } label { margin-right: 3px; } export function getData() { // create some random data let countries = ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], active: i % 5 != 0, sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // return data; }