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>MESCIUS Wijmo 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;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js',
'@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js',
'@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles',
'@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures',
'@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js',
'@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js',
'@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js',
'@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js',
'@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js',
'@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js',
'@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js',
'@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js',
'@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js',
'@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js',
'@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js',
'@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js',
'@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js',
'@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js',
'@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js',
'@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js',
'@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js',
'@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js',
'@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js',
'@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js',
'@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js',
'@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js',
'@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js',
'@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js',
'@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js',
'@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js',
'@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js',
'@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js',
'@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js',
'@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js',
'@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js',
'@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js',
'@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js',
'@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js',
'@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js',
'@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js',
'@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js',
'@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js',
'@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js',
'@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js',
'@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js',
'@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
