ComboBox with Strings

By default, the ComboBox acts as a regular HTML input element, with the additional styling and object model associated with all Wijmo controls.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import { getCountries } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // combo as a regular HTML input element (no itemsSource) let theComboNoSrc = new input.ComboBox('#theComboNoSrc', { textChanged: (sender) => { setText('theComboText', sender.text); } }); // // default combo let theCombo = new input.ComboBox('#theCombo', { textChanged: (sender) => { setText('theComboValue', sender.selectedValue); }, itemsSource: getCountries() }); // // customizable combo let theComboCustom = new input.ComboBox('#theComboCustom', { isRequired: false, isEditable: true, placeholder: 'No Country Selected', textChanged: (sender) => { setText('theComboCustomValue', sender.text); }, itemsSource: getCountries() }); // // handle checkboxes document.querySelector('#isRequired').addEventListener('click', e => { theComboCustom.isRequired = e.target.checked; }); document.querySelector('#isEditable').addEventListener('click', e => { theComboCustom.isEditable = e.target.checked; }); // // 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 Strings</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> The <b>text</b> property gets or sets the user's input: </p> <div class="form-group"> <label for="theComboNoSrc">Any string:</label> <div id="theComboNoSrc"></div> </div> <p> You have typed this: <b id="theComboText"></b>. </p> <h4> Choosing from Lists </h4> <p> If you want to provide a list of strings for users to choose from, set the <b>itemsSource</b> property to an array containing those items and users will be able to select one of them: </p> <div class="form-group"> <label for="theCombo">Select a Country:</label> <div id="theCombo"></div> </div> <p> You have selected this country: <b id="theComboValue"></b>. </p> <h4> Simple Customizations </h4> <p> By default, the ComboBox will force users to select one of the items on the list. Users will not be able to leave the combo empty or to enter values that are not on the list. </p> <p> You can change these behaviors by setting the <b>isRequired</b> and <b>isEditable</b> properties:</p> <p> <label> <input id="isRequired" type="checkbox"> isRequired </label> </p> <p> <label> <input id="isEditable" type="checkbox" checked="checked"> isEditable </label> </p> <div class="form-group"> <label for="theComboCustom">Select a Country:</label> <div id="theComboCustom"></div> </div> <p> You have selected this country: <b id="theComboCustomValue"></b>. </p> </div> </body> </html> export function getCountries() { return ['Austria', 'Australia', 'Belgium', 'Brazil', 'Canada', 'Chile', 'Denmark', 'Estonia', 'France', 'Germany', 'Hungary', 'Italy', 'Israel', 'Japan', 'Korea', 'Mexico', 'Norway', 'Oman', 'Poland', 'Qatar', 'Russia', 'Sweden', 'Scotland', 'Turkey', 'United Kingdom', 'United States', 'Vietnam', 'Yemen', 'Zambia']; } h4 { margin-top: 24px; } 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 { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { countries: string[]; // constructor(@Inject(DataService) private dataService: DataService) { this.countries = dataService.getCountries(); } } // @NgModule({ imports: [WjInputModule, FormsModule, 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 Strings</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> The <b>text</b> property gets or sets the user's input: </p> <div class="form-group"> <label for="theComboNoSrc">Any string:</label> <wj-combo-box #theComboNoSrc id="theComboNoSrc"></wj-combo-box> </div> <p> You have typed this: <b>{{ theComboNoSrc.text }}</b>. </p> <h4> Choosing from Lists </h4> <p> If you want to provide a list of strings for users to choose from, set the <b>itemsSource</b> property to an array containing those items and users will be able to select one of them: </p> <div class="form-group"> <label for="theCombo">Select a Country:</label> <wj-combo-box #theCombo id="theCombo" [itemsSource]="countries"></wj-combo-box> </div> <p> You have selected this country: <b>{{ theCombo.selectedValue }}</b>. </p> <h4> Simple Customizations </h4> <p> By default, the ComboBox will force users to select one of the items on the list. Users will not be able to leave the combo empty or to enter values that are not on the list. </p> <p> You can change these behaviors by setting the <b>isRequired</b> and <b>isEditable</b> properties:</p> <p> <label> <input id="isRequired" type="checkbox" [(ngModel)]="theComboCustom.isRequired"> isRequired </label> </p> <p> <label> <input id="isEditable" type="checkbox" [(ngModel)]="theComboCustom.isEditable"> isEditable </label> </p> <div class="form-group"> <label for="theComboCustom">Select a Country:</label> <wj-combo-box #theComboCustom id="theComboCustom" [isRequired]="false" [isEditable]="true" [placeholder]="'No Country Selected'" [itemsSource]="countries"></wj-combo-box> </div> <p> You have selected this country: <b>{{ theComboCustom.text }}</b>. </p> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getCountries() { return ['Austria', 'Australia', 'Belgium', 'Brazil', 'Canada', 'Chile', 'Denmark', 'Estonia', 'France', 'Germany', 'Hungary', 'Italy', 'Israel', 'Japan', 'Korea', 'Mexico', 'Norway', 'Oman', 'Poland', 'Qatar', 'Russia', 'Sweden', 'Scotland', 'Turkey', 'United Kingdom', 'United States', 'Vietnam', 'Yemen', 'Zambia']; } } h4 { margin-top: 24px; } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <p> The <b>text</b> property gets or sets the user's input: </p> <div class="form-group"> <label for="theComboNoSrc">Any string:</label> <wj-combo-box id="theComboNoSrc" :initialized="initComboNoSrc" :textChanged="onTextChanged"></wj-combo-box> </div> <p> You have typed this: <b>{{ text }}</b>. </p> <h4> Choosing from Lists </h4> <p> If you want to provide a list of strings for users to choose from, set the <b>itemsSource</b> property to an array containing those items and users will be able to select one of them: </p> <div class="form-group"> <label for="theCombo">Select a Country:</label> <wj-combo-box id="theCombo" :itemsSource="countries" :initialized="initCombo" :selectedIndexChanged="onComboSelectedIndexChanged"></wj-combo-box> </div> <p> You have selected this country: <b>{{ selectedValue }}</b>. </p> <h4> Simple Customizations </h4> <p> By default, the ComboBox will force users to select one of the items on the list. Users will not be able to leave the combo empty or to enter values that are not on the list. </p> <p> You can change these behaviors by setting the <b>isRequired</b> and <b>isEditable</b> properties:</p> <p> <label> <input id="isRequired" type="checkbox" v-model="isRequired"> isRequired </label> </p> <p> <label> <input id="isEditable" type="checkbox" v-model="isEditable"> isEditable </label> </p> <div class="form-group"> <label for="theComboCustom">Select a Country:</label> <wj-combo-box id="theComboCustom" :isRequired="isRequired" :isEditable="isEditable" :initialized="initComboCustom" :placeholder="'No Country Selected'" :itemsSource="countries" :selectedIndexChanged="onCustomCmboSelectedIndexChanged"></wj-combo-box> </div> <p> You have selected this country: <b>{{ customText }}</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 { getCountries } from './data' let App = Vue.extend({ name: 'app', data: function () { return { countries: getCountries(), text: '', selectedValue: '', isRequired: false, isEditable: true, customText: '', } }, methods: { initComboNoSrc: function(combo){ this.text = combo.text; }, initCombo: function(combo){ this.selectedValue = combo.selectedValue; }, initComboCustom: function(combo){ this.isRequired = combo.isRequired; this.isEditable = combo.isEditable; this.customText = combo.text; }, onTextChanged: function(s){ this.text = s.text; }, onComboSelectedIndexChanged: function(s){ this.selectedValue = s.selectedValue; }, onCustomCmboSelectedIndexChanged: function(s){ this.isRequired = s.isRequired; this.isEditable = s.isEditable; this.customText = s.text; } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> h4 { margin-top: 24px; } 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 Strings</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 ['Austria', 'Australia', 'Belgium', 'Brazil', 'Canada', 'Chile', 'Denmark', 'Estonia', 'France', 'Germany', 'Hungary', 'Italy', 'Israel', 'Japan', 'Korea', 'Mexico', 'Norway', 'Oman', 'Poland', 'Qatar', 'Russia', 'Sweden', 'Scotland', 'Turkey', 'United Kingdom', 'United States', 'Vietnam', 'Yemen', 'Zambia']; } 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 { getCountries } from './data'; // class App extends React.Component { // constructor(props) { super(props); this.countries = getCountries(); this.state = { text: null, value: null, isRequired: false, isEditable: true, customText: null }; } render() { return <div className="container-fluid"> <p> The <b>text</b> property gets or sets the user's input: </p> <div className="form-group"> <label htmlFor="theComboNoSrc">Any string:</label> <wjInput.ComboBox id="theComboNoSrc" initialized={this._initComboNoSrc.bind(this)} textChanged={this._onTextChanged.bind(this)}> </wjInput.ComboBox> </div> <p> You have typed this: <b>{this.state.text}</b>. </p> <h4>Choosing from Lists</h4> <p> If you want to provide a list of strings for users to choose from, set the <b>itemsSource</b> property to an array containing those items and users will be able to select one of them: </p> <div className="form-group"> <label htmlFor="theCombo">Select a Country:</label> <wjInput.ComboBox id="theCombo" itemsSource={this.countries} initialized={this._initCombo.bind(this)} selectedIndexChanged={this._onComboSelectedIndexChanged.bind(this)}> </wjInput.ComboBox> </div> <p> You have selected this country: <b>{this.state.value}</b>. </p> <h4>Simple Customizations</h4> <p> By default, the ComboBox will force users to select one of the items on the list. Users will not be able to leave the combo empty or to enter values that are not on the list. </p> <p> You can change these behaviors by setting the <b>isRequired</b> and <b>isEditable</b> properties:</p> <p> <label> <input id="isRequired" type="checkbox" onChange={e => this._changeRequired(e.target.checked)} defaultChecked={this.state.isRequired}/> isRequired </label> </p> <p> <label> <input id="isEditable" type="checkbox" onChange={e => this._changeEditable(e.target.checked)} defaultChecked={this.state.isEditable}/> isEditable </label> </p> <div className="form-group"> <label htmlFor="theComboCustom">Select a Country:</label> <wjInput.ComboBox id="theComboCustom" initialized={this._initComboCustom.bind(this)} placeholder="No Country Selected" itemsSource={this.countries} isRequired={this.state.isRequired} isEditable={this.state.isEditable} selectedIndexChanged={this._onCustomComboSelectedIndexChanged.bind(this)}> </wjInput.ComboBox> </div> <p> You have selected this country: <b>{this.state.customText}</b>. </p> </div>; } _initComboNoSrc(sender) { this.setState({ text: sender.text }); } _onTextChanged(sender) { this.setState({ text: sender.text }); } _initCombo(sender) { this.setState({ value: sender.selectedValue }); } _initComboCustom(sender) { this.setState({ customText: sender.text }); } _onComboSelectedIndexChanged(sender) { this.setState({ value: sender.selectedValue }); } _onCustomComboSelectedIndexChanged(sender) { this.setState({ customText: sender.text }); } _changeRequired(value) { this.setState({ isRequired: value }); } _changeEditable(value) { this.setState({ isEditable: value }); } } 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 Strings</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> h4 { margin-top: 24px; } body { margin-bottom: 24px; } label { margin-right: 3px; } export function getCountries() { return ['Austria', 'Australia', 'Belgium', 'Brazil', 'Canada', 'Chile', 'Denmark', 'Estonia', 'France', 'Germany', 'Hungary', 'Italy', 'Israel', 'Japan', 'Korea', 'Mexico', 'Norway', 'Oman', 'Poland', 'Qatar', 'Russia', 'Sweden', 'Scotland', 'Turkey', 'United Kingdom', 'United States', 'Vietnam', 'Yemen', 'Zambia']; }