Split Buttons

The Wijmo Menu control can be use as a split button, by setting the isButton property to true. When clicking on the menu header, the itemClicked event is triggered as if the item was selected in the dropdown.

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 the split-button menu var theSplitButton = new input.Menu('#theSplitButton', { // item clicked fires when you select an option or click the header isButton: true, itemClicked: (sender) => { alert('Running ' + sender.selectedValue); }, // // update header to show current selection selectedIndexChanged: (sender) => { if (sender.selectedIndex > -1) { sender.header = `Run: <b>${sender.selectedItem.header}</b>`; } }, // // populate menu after hooking up the selectedIndexChanged event displayMemberPath: 'header', selectedValuePath: 'value', itemsSource: [ { header: 'Internet Explorer', value: 'IE' }, { header: 'Chrome', value: 'CHR' }, { header: 'Firefox', value: 'FFX' }, { header: 'Safari', value: 'IOS' }, { header: 'Opera', value: 'OPR' } ], selectedValue: 'FFX' }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Menu Split Buttons</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="theSplitButton"></div> </div> </body> </html> body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data = [ { header: 'Internet Explorer', value: 'IE' }, { header: 'Chrome', value: 'CHR' }, { header: 'Firefox', value: 'FFX' }, { header: 'Safari', value: 'IOS' }, { header: 'Opera', value: 'OPR' } ]; // itemClicked(menu: input.Menu) { alert('Running ' + menu.selectedValue); } } // @NgModule({ imports: [WjInputModule, 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 Menu Split Buttons</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-menu #menu [isButton]="true" [displayMemberPath]="'header'" [selectedValuePath]="'value'" [header]="menu.selectedItem ? 'Run: <b>' + menu.selectedItem.header + '</b>' : menu.header" [itemsSource]="data" (itemClicked)="itemClicked(menu)" [selectedValue]="'FFX'"> </wj-menu> </div> body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-menu :isButton="true" :displayMemberPath="'header'" :selectedValuePath="'value'" :header="'Run: <b>' + selectedItem.header + '</b>'" :itemsSource="source" :itemClicked="itemClicked" :selectedItem="selectedItem" :selectedIndexChanged="selectedIndexChanged"> </wj-menu> </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() { let source = [ { header: 'Internet Explorer', value: 'IE' }, { header: 'Chrome', value: 'CHR' }, { header: 'Firefox', value: 'FFX' }, { header: 'Safari', value: 'IOS' }, { header: 'Opera', value: 'OPR' } ]; let selectedItem = source[2]; return { source, selectedItem }; }, methods: { itemClicked: function(menu) { alert('Running ' + menu.selectedValue); }, selectedIndexChanged: function(sender) { if (sender.selectedItem) { this.selectedItem = sender.selectedItem; } } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Menu Split Buttons</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._data = [ { header: 'Internet Explorer', value: 'IE' }, { header: 'Chrome', value: 'CHR' }, { header: 'Firefox', value: 'FFX' }, { header: 'Safari', value: 'IOS' }, { header: 'Opera', value: 'OPR' } ]; this.state = { item: this._data[2] }; } render() { return <div className="container-fluid"> <wjInput.Menu isButton={true} displayMemberPath="header" selectedValuePath="value" header={'Run: <b>' + this.state.item.header + '</b>'} itemClicked={this._itemClicked.bind(this)} selectedIndexChanged={this._selectedIndexChanged.bind(this)} itemsSource={this._data} selectedValue={this.state.item.value}> </wjInput.Menu> </div>; } _selectedIndexChanged(sender) { if (sender.selectedItem) { this.setState({ item: sender.selectedItem }); } } _itemClicked(sender) { alert('Running ' + 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>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> body { margin-bottom: 24pt; }