Checkbox-based Selection

Use FlexGrid's Selector class to add a checkbox-based scheme for row selection.

This selection scheme works great on mobile devices, which have no keyboards with shift and control keys which are normally used to create extended selections.

The Selector class works with flat and hierarchical views. When used with hierarchical views, users can toggle the selected state for entire groups at once.

The Selector class can be used on header columns as well as on regular scrollable/data columns.

Learn about FlexGrid | FlexGrid API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid, HeadersVisibility } from '@grapecity/wijmo.grid'; import { Selector } from '@grapecity/wijmo.grid.selector'; import { CollectionView, PropertyGroupDescription } from '@grapecity/wijmo'; import { getData } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the data (start grouped) let view = new CollectionView(getData(30)); setGroups(true); // create the grid let theGrid = new FlexGrid('#theGrid', { deferResizing: true, showMarquee: true, alternatingRowStep: 0, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'Country' }, { binding: 'product', header: 'Product' }, { binding: 'discount', header: 'Discount', format: 'p0' }, { binding: 'downloads', header: 'Downloads' }, { binding: 'sales', header: 'Sales' }, { binding: 'expenses', header: 'Expenses' } ], itemsSource: view }); // create the Selector let selector = new Selector(theGrid, { itemChecked: () => { showCheckedCount(); } }); // toggle groups document.getElementById('groups').addEventListener('click', e => { setGroups(e.target.checked); }); function setGroups(groupsOn) { let groups = view.groupDescriptions; groups.clear(); if (groupsOn) { groups.push(new PropertyGroupDescription('country'), new PropertyGroupDescription('product')); } } // toggle header column document.getElementById('header').addEventListener('click', e => { setHeaderColumn(e.target.checked); }); function setHeaderColumn(headerOn) { theGrid.headersVisibility = headerOn ? HeadersVisibility.All : HeadersVisibility.Column; selector.column = headerOn ? theGrid.rowHeaders.columns[0] : theGrid.columns[0]; } // show checked items showCheckedCount(); function showCheckedCount() { let cnt = document.getElementById('checked-count'), sel = theGrid.rows.filter(r => r.isSelected); cnt.textContent = sel.length.toString(); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Selector: Checkbox Selection</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"> <label> Grouped Data <input id="groups" type="checkbox" checked /> </label> <label> Header Column <input id="header" type="checkbox" checked /> </label> <p> There are now <b><span id="checked-count">0</span></b> items selected. </p> <div id="theGrid"></div> </div> </body> </html>
export function getData(count) { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Widgets,Gadgets,Yahoos'.split(','), data = []; for (var i = 0; i < count; i++) { var item = { id: i, country: pickOne(countries), product: pickOne(products), discount: Math.random() * .3, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }; data.push(item); } return data; } function pickOne(items) { return items[randBetween(0, items.length - 1)]; } function randBetween(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }
/* fixed grid height */ .wj-flexgrid { height: 350px; } /* some extra cell padding */ .wj-flexgrid .wj-cell { padding: 8px; } /* some space after the labels */ label { margin-right: 4em; }
(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);