Chaining ComboBoxes

This sample demonstrates how to chain two ComboBoxes using filtering and binding.

The source for the first ComboBox is used to filter out options in the second ComboBox.

When you select a country from the first ComboBox below, the second will be filtered to show only cities in that country.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import { getCountries, getCities } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create country and city combos let cmbCountry = new input.ComboBox('#cmbCountry', { displayMemberPath: 'name', itemsSource: getCountries() }); let cmbCity = new input.ComboBox('#cmbCity', { displayMemberPath: 'name', itemsSource: getCities() }); // filter city view based on currently selected country cmbCity.collectionView.filter = (city) => { return city.country === cmbCountry.collectionView.currentItem.id; }; cmbCountry.collectionView.currentChanged.addHandler(() => { cmbCity.collectionView.refresh(); // apply the filter }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Chaining Combos</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 id="cmbCountry"></div> <div id="cmbCity"></div> </div> </body> </html> // export function getCountries() { return [ { id: 0, name: 'US' }, { id: 1, name: 'Germany' }, { id: 2, name: 'UK' }, { id: 3, name: 'Japan' }, { id: 4, name: 'Italy' }, { id: 5, name: 'Greece' } ]; } // export function getCities() { return [ { id: 0, country: 0, name: 'Washington' }, { id: 1, country: 0, name: 'Miami' }, { id: 2, country: 0, name: 'Seattle' }, { id: 3, country: 1, name: 'Bonn' }, { id: 4, country: 1, name: 'Munich' }, { id: 5, country: 1, name: 'Berlin' }, { id: 6, country: 2, name: 'London' }, { id: 7, country: 2, name: 'Oxford' }, { id: 8, country: 2, name: 'Manchester' }, { id: 9, country: 3, name: 'Tokyo' }, { id: 10, country: 3, name: 'Sendai' }, { id: 11, country: 3, name: 'Kobe' }, { id: 12, country: 4, name: 'Rome' }, { id: 13, country: 4, name: 'Florence' }, { id: 14, country: 4, name: 'Milan' }, { id: 15, country: 5, name: 'Athens' }, { id: 16, country: 5, name: 'Santorini' }, { id: 17, country: 5, name: 'Thebes' } ]; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // 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, TCity, TCountry } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { countries: wijmo.CollectionView; cities: wijmo.CollectionView; // constructor(@Inject(DataService) private dataService: DataService) { this.countries = new wijmo.CollectionView(dataService.getCountries(), { currentChanged: (sender: wijmo.CollectionView) => { this.cities.refresh(); // apply filter to cities collection } }); this.cities = new wijmo.CollectionView(dataService.getCities(), { filter: (city: any) => { return city.country == this.countries.currentItem.id; } }); } } // @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 Chaining Combos</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"> <wj-combo-box [displayMemberPath]="'name'" [itemsSource]="countries"> </wj-combo-box> <wj-combo-box [displayMemberPath]="'name'" [itemsSource]="cities"> </wj-combo-box> </div> import { Injectable } from '@angular/core'; // export type TCountry = { id: number; name: string; } // export type TCity = { id: number; country: number; name: string; } // // @Injectable() export class DataService { getCountries() { return <TCountry[]>[ { id: 0, name: 'US' }, { id: 1, name: 'Germany' }, { id: 2, name: 'UK' }, { id: 3, name: 'Japan' }, { id: 4, name: 'Italy' }, { id: 5, name: 'Greece' } ]; } // getCities() { return <TCity[]>[ { id: 0, country: 0, name: 'Washington' }, { id: 1, country: 0, name: 'Miami' }, { id: 2, country: 0, name: 'Seattle' }, { id: 3, country: 1, name: 'Bonn' }, { id: 4, country: 1, name: 'Munich' }, { id: 5, country: 1, name: 'Berlin' }, { id: 6, country: 2, name: 'London' }, { id: 7, country: 2, name: 'Oxford' }, { id: 8, country: 2, name: 'Manchester' }, { id: 9, country: 3, name: 'Tokyo' }, { id: 10, country: 3, name: 'Sendai' }, { id: 11, country: 3, name: 'Kobe' }, { id: 12, country: 4, name: 'Rome' }, { id: 13, country: 4, name: 'Florence' }, { id: 14, country: 4, name: 'Milan' }, { id: 15, country: 5, name: 'Athens' }, { id: 16, country: 5, name: 'Santorini' }, { id: 17, country: 5, name: 'Thebes' } ]; } } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <wj-combo-box :displayMemberPath="'name'" :itemsSource="countries"> </wj-combo-box> <wj-combo-box :displayMemberPath="'name'" :itemsSource="cities"> </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 { getCities, getCountries } from './data'; let App = Vue.extend({ name: 'app', data: function () { // create chained collection views let cities = new wijmo.CollectionView(getCities()); let countries =new wijmo.CollectionView(getCountries(), { currentChanged: () => { cities.refresh() // refresh filter } }); cities.filter = city => { // define filter return city.country === (countries.currentItem).id; }; // expose collection views return { cities: cities, countries: countries } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Chaining Combos</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 getCountries() { return [ { id: 0, name: 'US' }, { id: 1, name: 'Germany' }, { id: 2, name: 'UK' }, { id: 3, name: 'Japan' }, { id: 4, name: 'Italy' }, { id: 5, name: 'Greece' } ]; } // export function getCities() { return [ { id: 0, country: 0, name: 'Washington' }, { id: 1, country: 0, name: 'Miami' }, { id: 2, country: 0, name: 'Seattle' }, { id: 3, country: 1, name: 'Bonn' }, { id: 4, country: 1, name: 'Munich' }, { id: 5, country: 1, name: 'Berlin' }, { id: 6, country: 2, name: 'London' }, { id: 7, country: 2, name: 'Oxford' }, { id: 8, country: 2, name: 'Manchester' }, { id: 9, country: 3, name: 'Tokyo' }, { id: 10, country: 3, name: 'Sendai' }, { id: 11, country: 3, name: 'Kobe' }, { id: 12, country: 4, name: 'Rome' }, { id: 13, country: 4, name: 'Florence' }, { id: 14, country: 4, name: 'Milan' }, { id: 15, country: 5, name: 'Athens' }, { id: 16, country: 5, name: 'Santorini' }, { id: 17, country: 5, name: 'Thebes' } ]; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { CollectionView } from '@grapecity/wijmo'; import { ComboBox } from '@grapecity/wijmo.react.input'; import { getCountries, getCities } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { countries: new CollectionView(getCountries(), { currentChanged: (sender) => { this.state.cities.refresh(); // apply the filte } }), cities: new CollectionView(getCities()) }; this.state.cities.filter = city => { return this.state.countries.currentItem.id == city.country; }; } render() { return <div className="container-fluid"> <ComboBox displayMemberPath="name" itemsSource={this.state.countries}/> <ComboBox displayMemberPath="name" itemsSource={this.state.cities}/> </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 Chaining Combos</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; } export function getCountries() { return [ { id: 0, name: 'US' }, { id: 1, name: 'Germany' }, { id: 2, name: 'UK' }, { id: 3, name: 'Japan' }, { id: 4, name: 'Italy' }, { id: 5, name: 'Greece' } ]; } // export function getCities() { return [ { id: 0, country: 0, name: 'Washington' }, { id: 1, country: 0, name: 'Miami' }, { id: 2, country: 0, name: 'Seattle' }, { id: 3, country: 1, name: 'Bonn' }, { id: 4, country: 1, name: 'Munich' }, { id: 5, country: 1, name: 'Berlin' }, { id: 6, country: 2, name: 'London' }, { id: 7, country: 2, name: 'Oxford' }, { id: 8, country: 2, name: 'Manchester' }, { id: 9, country: 3, name: 'Tokyo' }, { id: 10, country: 3, name: 'Sendai' }, { id: 11, country: 3, name: 'Kobe' }, { id: 12, country: 4, name: 'Rome' }, { id: 13, country: 4, name: 'Florence' }, { id: 14, country: 4, name: 'Milan' }, { id: 15, country: 5, name: 'Athens' }, { id: 16, country: 5, name: 'Santorini' }, { id: 17, country: 5, name: 'Thebes' } ]; }