Hierarchical Menus

You can create Hierarchical Menus with the Menu control also by setting the subItemsPath to a property value that is part of your data source. This sample uses a few Menu controls with hierarchical Menus to demonstrate supported features.

Learn about Input Controls | Hierarchical Menus Documentation | Menu API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@mescius/wijmo.input'; import * as wijmo from '@mescius/wijmo'; import { getMenuTree } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let menuTree = getMenuTree(); // // element used to show menu commands let target = document.querySelector('#menuTarget'), targetStyle = target.style, computedStyle = getComputedStyle(target); // // create File menu (uses itemClicked event) let menuFile = new input.Menu('#menu-file', { header: 'File', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.fileMenu, itemClicked: (sender) => { target.innerHTML = `Thank you for clicking <b><i>${sender.text}</i></b>!`; } }); // // create Edit menu (uses itemClicked event) let menuEdit = new input.Menu('#menu-edit', { header: 'Edit', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.editMenu, itemClicked: (sender) => { target.innerHTML = `Thank you for clicking <b><i>${sender.text}</i></b>!`; } }); // // create Format menu (uses command property) let menuFormat = new input.Menu('#menu-format', { header: 'Format', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.formatMenu, command: getFormatMenuCommand() }); // // toggle animations document.querySelector('#isAnimated').addEventListener('click', e => { [menuFile, menuEdit, menuFormat].forEach(menu => { menu.isAnimated = e.target.checked; }); }); // // toggle open on hover document.querySelector('#openOnHover').addEventListener('click', e => { [menuFile, menuEdit, menuFormat].forEach(menu => { menu.openOnHover = e.target.checked; }); }); // // show right-to-left menus document.querySelector('#rtl').addEventListener('click', e => { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', e.target.checked ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); }); // // format menu command function getFormatMenuCommand() { return { executeCommand: (param) => { switch (param.prop) { case 'face': targetStyle.fontFamily = param.header; break; case 'font': switch (param.header) { case 'Bold': targetStyle.fontWeight = targetStyle.fontWeight ? '' : 'bold'; break; case 'Italic': targetStyle.fontStyle = targetStyle.fontStyle ? '' : 'italic'; break; case 'Underline': targetStyle.textDecoration = targetStyle.textDecoration ? '' : 'underline'; break; case 'Larger': targetStyle.fontSize = (parseFloat(computedStyle.fontSize) * 1.2) + 'px'; break; case 'Smaller': targetStyle.fontSize = (parseFloat(computedStyle.fontSize) * .8) + 'px'; break; } break; case 'color': targetStyle.color = param.header.toLowerCase(); break; case 'background': targetStyle.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param) => { switch (param.prop) { case 'face': return targetStyle.fontFamily != param.header; case 'font': switch (param.header) { case 'Larger': return parseFloat(computedStyle.fontSize) < 24; case 'Smaller': return parseFloat(computedStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return targetStyle.color != color && targetStyle.backgroundColor != color; } return true; } }; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Hierarchical Menus</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="menubar"> <div id="menu-file"></div> <div id="menu-edit"></div> <div id="menu-format"></div> </div> <p id="menuTarget"> Wijmo Menus are great! </p> <label> openOnHover <input id="openOnHover" type="checkbox" checked="checked"> </label> <label> isAnimated <input id="isAnimated" type="checkbox" checked="checked"> </label> <label> Right-to-Left <input id="rtl" type="checkbox"> </label> </div> </body> </html>
// export function getMenuTree() { return { fileMenu: [ { header: 'New', items: [ { header: 'Project' }, { header: 'Site' }, { header: 'File' } ] }, { header: 'Open' }, { header: 'Save' }, { header: 'Save As', items: [ { header: 'Normal' }, { header: 'Compressed' }, { header: 'Encrypted' } ] }, { header: '-' }, { header: 'Exit' } ], editMenu: [ { header: 'Go to', items: [ { header: 'Line' }, { header: 'Symbol' }, { header: 'File', items: [ { header: 'Current Project' }, { header: 'Current Solution' }, { header: 'Select...' } ] } ] }, { header: 'Find and Replace', items: [ { header: 'Quick Find' }, { header: 'Quick Replace' }, { header: 'Find in Files' }, { header: 'Replace in Files', items: [ { header: 'All' }, { header: 'Read/Write Only' } ] } ] }, { header: '-' }, { header: 'Undo' }, { header: 'Redo' } ], formatMenu: [ { header: 'Font', items: [ { header: 'Family', items: [ { header: 'Arial', prop: 'face' }, { header: 'Times', prop: 'face' }, { header: 'Courier', prop: 'face' }, { header: 'Verdana', prop: 'face' }, { header: 'Georgia', prop: 'face' } ] }, { header: 'Bold', prop: 'font' }, { header: 'Italic', prop: 'font' }, { header: 'Underline', prop: 'font' }, { header: '-' }, { header: 'Larger', prop: 'font' }, { header: 'Smaller', prop: 'font' } ] }, { header: 'Color', items: [ { header: 'Black', prop: 'color' }, { header: 'Red', prop: 'color' }, { header: 'Green', prop: 'color' }, { header: 'Blue', prop: 'color' } ] }, { header: 'Background', items: [ { header: 'White', prop: 'background' }, { header: 'Red', prop: 'background' }, { header: 'Green', prop: 'background' }, { header: 'Blue', prop: 'background' } ] } ] }; }
label { margin-bottom: 15px; margin-right: 25px; } /* element affected by the menu commands */ #menuTarget { font-size: 18pt; text-align: center; padding: 16px; margin: 6px 0; background: #00c1d5; color: black; border: 1px solid rgba(0, 0, 0, .25); } /* bar containing the menus */ .menubar { position: sticky; display: flex; background: #fddfa7; padding: 12px; top: 0; } /* customize wijmo default styles */ .wj-state-selected { color: black; background: orange; } .wj-menu { padding: 6px 14px; border: none; background: transparent; } .wj-menu:hover, .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .wj-menu .wj-input-group .wj-input-group-btn { /* hide the menu's drop-down buttons */ display: none; } .wj-listbox.wj-menu-items { min-width: 8em; border: none; background: #fddfa7; } .wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) { padding: 6px 12px; }
(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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/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);