import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridContextMenu } from './flex-grid-context-menu';
import { getData } from './data';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
let theGrid = new FlexGrid('#theGrid', {
showMarquee: true,
allowSorting: 'MultiColumn',
itemsSource: getData(100)
});
new FlexGridContextMenu(theGrid);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo FlexGrid Context 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 id="theGrid"></div>
</div>
</body>
</html>
export function getData(cnt) {
let countries = 'US,Germany,UK,Japan'.split(',');
let data = [];
for (var i = 0; i < cnt; i++) {
data.push({
id: i,
date: new Date(Date.now() - Math.random() * 10 * 24 * 3600 * 1000),
country: countries[i % countries.length],
active: Math.random() < .5,
sales: Math.random() * 1000,
expenses: Math.random() * 500
});
}
return data;
}
.wj-flexgrid {
height: 300px;
}
.wj-flexgrid .wj-cell.wj-frozen {
background: #FFFBDD;
}
.ctx-menu {
padding: 3px;
min-width: 120px;
background: rgb(221, 250, 255);
overflow: hidden;
}
.ctx-menu .wj-listbox-item {
margin: 6px;
}
import { Menu } from '@mescius/wijmo.input';
import { CellRange, GroupRow, AllowSorting, ClipStringOptions } from '@mescius/wijmo.grid';
import { DataType, SortDescription, CollectionViewGroup, PropertyGroupDescription, saveFile } from '@mescius/wijmo';
import { FlexGridXlsxConverter } from '@mescius/wijmo.grid.xlsx';
import { FlexGridPdfConverter, ScaleMode } from '@mescius/wijmo.grid.pdf';
export class FlexGridContextMenu {
constructor(grid) {
let host = grid.hostElement, menu = this._buildMenu(grid);
host.addEventListener('contextmenu', (e) => {
// select the cell/column that was clicked
let sel = grid.selection, ht = grid.hitTest(e), row = ht.getRow();
switch (ht.panel) {
case grid.cells:
let colIndex = ht.col;
// if this is a group header, select the group column
if (row instanceof GroupRow && row.dataItem instanceof CollectionViewGroup) {
let gd = row.dataItem.groupDescription;
if (gd instanceof PropertyGroupDescription) {
let col = grid.getColumn(gd.propertyName);
if (col && col.index > -1) {
colIndex = col.index;
}
}
}
grid.select(ht.row, colIndex);
break;
case grid.columnHeaders:
grid.select(sel.row, ht.col);
break;
case grid.rowHeaders:
grid.select(ht.row, sel.col);
break;
default:
return; // invalid panel
}
// show the menu for the current column
if (grid.selection.col > -1) {
e.preventDefault(); // cancel the browser's default menu
menu.show(e); // and show ours
}
}, true);
}
_buildMenu(grid) {
let menu = new Menu(document.createElement('div'), {
owner: grid.hostElement,
displayMemberPath: 'header',
subItemsPath: 'items',
commandParameterPath: 'cmd',
dropDownCssClass: 'ctx-menu',
openOnHover: true,
closeOnLeave: true,
itemsSource: [
{
header: 'Sort', items: [
{ header: 'Ascending', cmd: 'SRT_ASC' },
{ header: 'Descending', cmd: 'SRT_DESC' },
{ header: 'No Sort', cmd: 'SRT_NONE' },
{ header: '-' },
{ header: 'Clear All Sorts', cmd: 'SRT_CLR' }
]
},
{ header: '-' },
{ header: 'Pin/Unpin', cmd: 'PIN' },
{ header: '-' },
{ header: 'AutoSize', cmd: 'ASZ' },
{ header: 'AutoSize All', cmd: 'ASZ_ALL' },
{ header: '-' },
{ header: 'Group/Ungroup', cmd: 'GRP' },
{ header: 'Clear All Groups', cmd: 'GRP_CLR' },
{ header: '-' },
{
header: 'Export', items: [
{ header: 'CSV', cmd: 'X_CSV' },
{ header: 'XLSX', cmd: 'X_XLSX' },
{ header: 'PDF', cmd: 'X_PDF' },
]
}
],
command: {
// enable/disable menu commands
canExecuteCommand: (cmd) => {
let view = grid.collectionView, col = grid.columns[grid.selection.col];
switch (cmd) {
case 'SRT_ASC':
return col.currentSort != '+';
case 'SRT_DESC':
return col.currentSort != '-';
case 'SRT_NONE':
return col.currentSort != null;
case 'SRT_CLR':
return view.sortDescriptions.length > 0;
case 'PIN':
return true; // toggle pin
case 'ASZ':
case 'ASZ_ALL':
return true;
case 'GRP':
return col.dataType != DataType.Number; // don't group numbers
case 'GRP_CLR':
return view.groupDescriptions.length > 0;
}
return true;
},
// execute menu commands
executeCommand: (cmd) => {
let view = grid.collectionView, cols = grid.columns, col = cols[grid.selection.col], sd = view.sortDescriptions, gd = view.groupDescriptions;
switch (cmd) {
case 'SRT_ASC':
case 'SRT_DESC':
case 'SRT_NONE':
if (grid.allowSorting != AllowSorting.MultiColumn) {
sd.clear();
}
else {
for (let i = 0; i < sd.length; i++) {
if (sd[i].property == col.binding) {
sd.removeAt(i);
break;
}
}
}
if (cmd != 'SRT_NONE') {
sd.push(new SortDescription(col.binding, cmd == 'SRT_ASC'));
}
break;
case 'SRT_CLR':
sd.clear();
break;
case 'PIN':
let fCols = grid.frozenColumns;
if (col.index >= fCols) { // pinning
cols.moveElement(col.index, fCols, false);
cols.frozen = cols.frozen + 1;
}
else { // unpinning
cols.moveElement(col.index, fCols - 1, false);
cols.frozen = cols.frozen - 1;
}
break;
case 'ASZ':
grid.autoSizeColumn(col.index);
break;
case 'ASZ_ALL':
grid.autoSizeColumns(0, grid.columns.length - 1);
break;
case 'GRP':
// remove group
for (let i = 0; i < gd.length; i++) {
if (gd[i].propertyName == col.binding) {
gd.removeAt(i);
return; // we're done
}
}
// add group
gd.push(new PropertyGroupDescription(col.binding));
break;
case 'GRP_CLR':
gd.clear();
break;
// export
case 'X_CSV':
let rng = new CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1), csv = grid.getClipString(rng, ClipStringOptions.CSV, true, false);
saveFile(csv, 'FlexGrid.csv');
break;
case 'X_XLSX':
FlexGridXlsxConverter.saveAsync(grid, null, 'FlexGrid.xlsx');
break;
case 'X_PDF':
FlexGridPdfConverter.export(grid, 'FlexGrid.pdf', {
maxPages: 10,
scaleMode: ScaleMode.PageWidth,
documentOptions: {
compress: true,
header: { declarative: { text: '\t&[Page] of &[Pages]' } },
footer: { declarative: { text: '\t&[Page] of &[Pages]' } },
info: { author: 'MESCIUS', title: 'FlexGrid' }
},
styles: {
cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6' },
altCellStyle: { backgroundColor: '#f9f9f9' },
groupCellStyle: { backgroundColor: '#dddddd' },
headerCellStyle: { backgroundColor: '#eaeaea' }
}
});
break;
}
// restore focus to active grid cell
grid.refresh();
let sel = grid.selection, cell = grid.cells.getCellElement(sel.row, sel.col);
if (cell) {
cell.focus();
}
}
}
});
// done
return menu;
}
}
(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.style': 'npm:@mescius/wijmo.grid.style/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);
