DropDown Control

The DropDown control is an abstract class, used as a base for several controls, including ComboBox, AutoComplete, and MultiSelect. The drop-down element is shown when the dropdown button is clicked or user input changes in the control. This sample demonstrates the behavior with the ComboBox and InputDate controls. There are also options to set some common properties on the DropDown as well.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create two DropDowns let theComboBox = new input.ComboBox('#theComboBox', { itemsSource: ['Ringo', 'George', 'John', 'Paul'] }); let theInputDate = new input.InputDate('#theInputDate'); // // customize the DropDowns document.querySelector('#isAnimated').addEventListener('click', e => { let checked = e.target.checked; theComboBox.isAnimated = checked; theInputDate.isAnimated = checked; }); // document.querySelector('#isDroppedDown').addEventListener('click', e => { let checked = e.target.checked; theComboBox.isDroppedDown = checked; }); // document.querySelector('#dropDownCssClass').addEventListener('click', e => { let checked = e.target.checked; theComboBox.dropDownCssClass = checked ? 'custom-dd' : ''; theInputDate.dropDownCssClass = checked ? 'custom-dd' : ''; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity DropDown Overview</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="row"> <div class="col-xs-6"> <div class="form-check"> <label for="isAnimated" class="form-check-label">isAnimated:</label> <input id="isAnimated" type="checkbox"> </div> <div class="form-check"> <label for="isDroppedDown" class="form-check-label">isDroppedDown:</label> <input id="isDroppedDown" type="checkbox"> </div> <div class="form-check"> <label for="dropDownCssClass" class="form-check-label">dropDownCssClass:</label> <input id="dropDownCssClass" type="checkbox"> </div> </div> <div class="col-xs-6"> <div id="theComboBox"></div> <br /> <div id="theInputDate"></div> </div> </div> </div> </body> </html> .custom-dd { padding: 12px; font-size: 75% !important; font-style: italic !important; background: #FFF6D6 !important; } .wj-dropdown { margin-bottom: 6px; } label { width: 200px; text-align: right; margin-right: 3px; } body { margin-bottom: 36pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } 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'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { isAnimated = false; isDroppedDown = false; dropDownCssClass = false; data = ['Ringo', 'George', 'John', 'Paul']; } // @NgModule({ imports: [WjInputModule, FormsModule, BrowserModule], declarations: [AppComponent], 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 DropDown Overview</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="row"> <div class="col-xs-6"> <div class="form-check"> <label for="isAnimated" class="form-check-label">isAnimated:</label> <input id="isAnimated" type="checkbox" [(ngModel)]="isAnimated"> </div> <div class="form-check"> <label for="isDroppedDown" class="form-check-label">isDroppedDown:</label> <input id="isDroppedDown" type="checkbox" [(ngModel)]="isDroppedDown"> </div> <div class="form-check"> <label for="dropDownCssClass" class="form-check-label">dropDownCssClass:</label> <input id="dropDownCssClass" type="checkbox" [(ngModel)]="dropDownCssClass"> </div> </div> <div class="col-xs-6"> <wj-combo-box [itemsSource]="data" [isAnimated]="isAnimated" [isDroppedDown]="isDroppedDown" [dropDownCssClass]="dropDownCssClass ? 'custom-dd' : ''"></wj-combo-box> <br /> <wj-input-date [isAnimated]="isAnimated" [dropDownCssClass]="dropDownCssClass ? 'custom-dd' : ''"> </wj-input-date> </div> </div> </div> .custom-dd { padding: 12px; font-size: 75% !important; font-style: italic !important; background: #FFF6D6 !important; } .wj-dropdown { margin-bottom: 6px; } label { width: 200px; text-align: right; margin-right: 3px; } body { margin-bottom: 36pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-check"> <label for="isAnimated" class="form-check-label">isAnimated:</label> <input id="isAnimated" type="checkbox" v-model="isAnimated"> </div> <div class="form-check"> <label for="isDroppedDown" class="form-check-label">isDroppedDown:</label> <input id="isDroppedDown" type="checkbox" v-model="isDroppedDown"> </div> <div class="form-check"> <label for="dropDownCssClass" class="form-check-label">dropDownCssClass:</label> <input id="dropDownCssClass" type="checkbox" v-model="dropDownCssClass"> </div> </div> <div class="col-xs-6"> <wj-combo-box :itemsSource="data" :isAnimated="isAnimated" :isDroppedDown="isDroppedDown" :dropDownCssClass="dropDownCssClass ? 'custom-dd' : ''"></wj-combo-box> <br /> <wj-input-date :isAnimated="isAnimated" :dropDownCssClass="dropDownCssClass ? 'custom-dd' : ''"> </wj-input-date> </div> </div> </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'; let App = Vue.extend({ name: 'app', data: function () { return { isAnimated: false, isDroppedDown: false, dropDownCssClass: false, data: ['Ringo', 'George', 'John', 'Paul'] } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .custom-dd { padding: 12px; font-size: 75% !important; font-style: italic !important; background: #FFF6D6 !important; } .container-fluid .wj-dropdown { margin-bottom: 6px; } label { width: 200px; text-align: right; margin-right: 3px; } body { margin-bottom: 36pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity DropDown Overview</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> 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'; // class App extends React.Component { constructor(props) { super(props); this.updateAnimatedStatus = (target) => { this.setState({ isAnimated: target.checked }); }; this.updateDroppedDownStatus = (target) => { this.setState({ isDroppedDown: target.checked }); }; this.updateDropDownCssClass = (target) => { this.setState({ dropDownCssClass: target.checked }); }; this.state = { isAnimated: false, isDroppedDown: false, dropDownCssClass: false, data: ['Ringo', 'George', 'John', 'Paul'] }; } render() { return <div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-check"> <label htmlFor="isAnimated" className="form-check-label">isAnimated:</label> <input id="isAnimated" type="checkbox" defaultChecked={false} onChange={(e) => this.updateAnimatedStatus(e.target)}/> </div> <div className="form-check"> <label htmlFor="isDroppedDown" className="form-check-label">isDroppedDown:</label> <input id="isDroppedDown" type="checkbox" defaultChecked={false} onChange={(e) => this.updateDroppedDownStatus(e.target)}/> </div> <div className="form-check"> <label htmlFor="dropDownCssClass" className="form-check-label">dropDownCssClass:</label> <input id="dropDownCssClass" type="checkbox" defaultChecked={false} onChange={(e) => this.updateDropDownCssClass(e.target)}/> </div> </div> <div className="col-xs-6"> <wjInput.ComboBox itemsSource={this.state.data} isAnimated={this.state.isAnimated} isDroppedDown={this.state.isDroppedDown} dropDownCssClass={this.state.dropDownCssClass ? 'custom-dd' : ''}> </wjInput.ComboBox> <br /> <wjInput.InputDate isAnimated={this.state.isAnimated} dropDownCssClass={this.state.dropDownCssClass ? 'custom-dd' : ''}> </wjInput.InputDate> </div> </div> </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>AutoComplete</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> .custom-dd { padding: 12px; font-size: 75% !important; font-style: italic !important; background: #FFF6D6 !important; } .wj-dropdown { margin-bottom: 6px; } label { width: 200px; text-align: right; margin-right: 3px; } body { margin-bottom: 36pt; }