Custom Editors

Although the FlexGrid control provides efficient, Excel-style editing by default, you may want to customize the editing experience by using custom editors.

This is easily done by assigning an instance of an editor control to the column's editor property. This sample demonstrates this using Wijmo's InputDate, InputTime, ComboBox, AutoComplete, and InputColor, InputNumber controls.

Learn about FlexGrid | FlexGrid Documentation | FlexGrid API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid, DataMap } from '@grapecity/wijmo.grid'; import { InputDate, InputTime, InputNumber, InputColor, ComboBox, AutoComplete } from '@grapecity/wijmo.input'; import { getData, getCountries, getProducts } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create a grid with custom editors new FlexGrid('#theGrid', { showMarquee: true, selectionMode: 'MultiRange', alternatingRowStep: 0, autoGenerateColumns: false, columns: [ { header: 'ID', binding: 'id', width: 80, isReadOnly: true }, { header: 'Date', binding: 'date', format: 'd', editor: new InputDate(document.createElement('div')) }, { header: 'Time', binding: 'time', format: 't', editor: new InputTime(document.createElement('div'), { isEditable: true, format: 't', step: 30 }) }, { header: 'Country', binding: 'country', editor: new ComboBox(document.createElement('div'), { itemsSource: getCountries() }) }, { header: 'Product', binding: 'productId', dataMap: new DataMap(getProducts(), 'id', 'name'), editor: new AutoComplete(document.createElement('div'), { itemsSource: getProducts(), selectedValuePath: 'id', displayMemberPath: 'name' }) }, { header: 'Color', binding: 'color', cellTemplate: '<span class="colorbox" style="background:${text};"></span> ${text}', editor: new InputColor(document.createElement('div')) }, { header: 'Amount', binding: 'amount', format: 'n2', editor: new InputNumber(document.createElement('div'), { format: 'n2', step: 10, min: 0, max: 10000 }) }, { header: 'Premium', binding: 'premium', cssClass: 'switch' } ], itemsSource: getData() }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Custom Editors</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="theGrid"></div> </div> </body> </html>
export function getData(cnt = 100) { var data = [], countries = getCountries(), products = getProducts(), dt = new Date(), yr = dt.getFullYear(); for (var i = 0; i < cnt; i++) { data.push({ id: i, date: new Date(yr, i % 12, 25, i % 24, i % 60, i % 60), time: new Date(yr, i % 12, 25, i % 24, i % 60, i % 60), country: pickOne(countries), productId: pickOne(products).id, color: pickOne('Red,Green,Blue,Yellow,Pink,Orange,Gold'.split(',')), amount: Math.random() * 10000, discount: Math.random() / 4, premium: Math.random() > .8 }); } return data; } export function getCountries() { return 'US,Germany,UK,Japan,Italy,Greece'.split(','); } export function getProducts() { let p = 'Andy Capp\'s fries,Barcel,Brannigans,Bugles,Cape Cod Potato Chips,Cheese Flavoured Moments,' + 'Cheetos,Cheez Doodles,Cheez-It,Cheezies,CornNuts,David Sunflower Seeds,Doritos,Frazzles,Frito-Lay,' + 'Fritos,Golden Wonder,Hula Hoops,Kettle Foods,KP Nuts,Kurkure,Lay\'s Stax,McCoys Crisps,' + 'Monster Munch,Munchos,Nobby\'s Nuts,Phileas Fogg,Pirate\'s Booty,Pringles,Ringos,Ruffles,' + 'Salt\'n\' Shake,San Nicasio,Space Raiders,Sun Chips,Smith\'s Crisps,Tudor Crisps,Twiglets,' + 'Twisties,Tyrrells,Tyrrells Apple Chips,Walkers Crisps,Wheat Crunchies,Wise Foods,Wotsits'; return p.split(',').map((name, id) => { return { id: id, name: name }; }); } function pickOne(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
body { margin-bottom: 24px; } .wj-flexgrid { height: 300px; margin-bottom: 12px; } .wj-flexgrid .wj-cell { padding: 6px 8px; } .colorbox { display: inline-block; width: 12px; height: 1.5em; margin: 0 3px 0 -3px; border: 1px solid black; vertical-align: bottom; } /* switch-style checkbox */ .wj-cell.switch input[type=checkbox] { opacity: 0; width: 100%; } .wj-cell.switch label { width: 3em; position: relative; } .wj-cell.switch input[type=checkbox]+span { pointer-events: none; background: rgba(0, 0, 0, 0.4); } .wj-cell.switch input[type=checkbox]:checked+span { background: #0085c7; /* rgb(27, 255, 27) */ } .wj-cell.switch:hover input[type=checkbox]+span:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); transition: all 0.3s; } .wj-cell.switch input[type=checkbox]+span:before { content: ''; position: absolute; display: block; left: 0; top: .45em; width: 2.5em; height: .75em; border-radius: 1em; background: rgba(0, 0, 0, .4); opacity: .25; } .wj-cell.switch input[type=checkbox]:checked+span:before { background: inherit; } .wj-cell.switch input[type=checkbox]+span:after { content: ''; position: absolute; left: 0; top: 0.13em; width: 1.3em; height: 1.3em; background: white; border-radius: 1em; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .wj-cell.switch input[type=checkbox]:checked+span:after { left: 1.25em; transition: all 0.3s; background: inherit; }
(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.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.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);