import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
import { getData } from './data';
import { TableView } from './table-view';
import { ItemEditor } from './item-editor';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// create a CollectionView
let view = new wijmo.CollectionView(getData(500), {
pageSize: 10,
newItemCreator: () => {
let newItem = getData(1)[0];
newItem.id = -1;
return newItem;
}
});
//
new TableView('#tableView', view, { amount: 'n2' });
new input.CollectionViewNavigator("#navigator", { cv: view });
new input.CollectionViewNavigator("#pager", { cv: view, byPage: true });
new ItemEditor('#editor', view);
//
let menu = new input.Menu("#pageSizeMenu", {
itemsSource: [
{ value: 0, text: 'No Paging' },
{ value: 10, text: '10' },
{ value: 15, text: '15' },
{ value: 30, text: '30' },
{ value: 50, text: '50' }
],
displayMemberPath: 'text',
selectedValuePath: 'value',
selectedValue: view.pageSize,
selectedIndexChanged: (sender) => {
if (sender.selectedIndex >= 0) {
updateMenuHeader(sender);
view.pageSize = sender.selectedValue;
}
}
});
updateMenuHeader(menu);
//
function updateMenuHeader(menu) {
if (menu.selectedIndex >= 0) {
menu.header = `Page Size: <b>${menu.selectedItem.text}</b>`;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo CollectionView Overview</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="menu"></div>
<div class="row">
<div class="col-md-6">
<h4>Current Item</h4>
<div id="editor"></div>
</div>
<div class="col-md-6">
<h4>Navigation</h4>
<dl>
<dt>items</dt>
<dd>
<div id="navigator"></div>
</dd>
<dt>pages</dt>
<dd>
<div id="pager"></div>
</dd>
</dl>
<div id="pageSizeMenu"></div>
</div>
</div>
<div id="tableView"></div>
</div>
</body>
</html>
//
export function getData(count) {
let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], colors = ['Black', 'White', 'Red', 'Green', 'Blue'], data = [];
//
// add count items
for (let i = 0; i < count; i++) {
// constants used to create data items
let countryId = Math.floor(Math.random() * countries.length), colorId = Math.floor(Math.random() * colors.length);
//
// create the item
let item = {
id: i,
country: countries[countryId],
color: colors[colorId],
amount: Math.random() * 10000 - 5000
};
//
// add the item to the list
data.push(item);
}
//
return data;
}
.table {
margin-bottom: 0px !important;
}
import * as wijmo from '@mescius/wijmo';
//
export class ItemEditor extends wijmo.Control {
//
constructor(element, view) {
wijmo.assert(!!view, 'view must not be null.');
//
super(element);
//
this.applyTemplate('', this.getTemplate(), {
_tbId: 'id',
_tbCountry: 'country',
_tbColor: 'color',
_tbAmount: 'amount',
_btnEdit: 'edit',
_btnAdd: 'add',
_btnDelete: 'delete',
_btnCommit: 'commit',
_btnCancel: 'cancel'
});
//
this._btnEdit.addEventListener('click', () => this._edit());
this._btnAdd.addEventListener('click', () => this._add());
this._btnDelete.addEventListener('click', () => this._remove());
this._btnCommit.addEventListener('click', () => this._commit());
this._btnCancel.addEventListener('click', () => this._cancel());
//
this._view = view;
this._view.currentChanging.addHandler(() => {
if (this._view.isEditingItem) {
this._commit();
}
});
this._view.currentChanged.addHandler(() => this.invalidate());
//
this.invalidate();
}
refresh() {
super.refresh();
//
let cur = this._view.currentItem, edit = this._isEditing();
//
this._tbId.disabled = !edit;
this._tbCountry.disabled = !edit;
this._tbColor.disabled = !edit;
this._tbAmount.disabled = !edit;
//
this._tbId.value = cur ? cur.id.toString() : '';
this._tbCountry.value = cur ? cur.country.toString() : '';
this._tbColor.value = cur ? cur.color.toString() : '';
this._tbAmount.value = cur ? cur.amount.toString() : '';
//
let display = edit ? 'none' : '';
this._btnEdit.style.display = display;
this._btnAdd.style.display = display;
this._btnDelete.style.display = display;
//
display = edit ? '' : 'none';
this._btnCommit.style.display = display;
this._btnCancel.style.display = display;
}
//
_isEditing() {
return this._view.isEditingItem || this._view.isAddingNew;
}
//
_edit() {
this._view.editItem(this._view.currentItem);
this.invalidate();
}
//
_add() {
this._view.addNew();
}
//
_remove() {
this._view.remove(this._view.currentItem);
}
//
_commit() {
let cur = this._view.currentItem;
//
cur.id = this._tbId.value;
cur.country = this._tbCountry.value;
cur.color = this._tbColor.value;
cur.amount = this._tbAmount.value;
//
this._view.commitEdit();
this._view.commitNew();
this.invalidate();
}
//
_cancel() {
this._view.cancelEdit();
this._view.cancelNew();
this.invalidate();
}
}
ItemEditor.controlTemplate = `<dl class="dl-horizontal">
<dt>ID</dt>
<dd>
<input type="text" class="form-control" wj-part="id" />
</dd>
<dt>Country</dt>
<dd>
<input type="text" class="form-control" wj-part="country" />
</dd>
<dt>Color</dt>
<dd>
<input type="text" class="form-control" wj-part="color" />
</dd>
<dt>Amount</dt>
<dd>
<input type="number" class="form-control" wj-part="amount" />
</dd>
<dt></dt>
<dd>
<div class="btn-group data-btn-group">
<button class="btn btn-default btn-sm" wj-part="edit">Edit</button>
<button class="btn btn-default btn-sm" wj-part="add">Add</button>
<button class="btn btn-default btn-sm" wj-part="delete">Delete</button>
<button class="btn btn-default btn-sm" wj-part="commit">Commit</button>
<button class="btn btn-default btn-sm" wj-part="cancel">Cancel</button>
</div>
</dd>
</dl>`;
import * as wijmo from '@mescius/wijmo';
//
export class TableView extends wijmo.Control {
//
constructor(selector, view, format) {
super(selector);
//
this.applyTemplate('table-responsive', this.getTemplate(), {
_table: 'table'
});
this._format = format || {};
//
this._view = view;
this._view.collectionChanged.addHandler(() => this.invalidate());
this._view.currentChanged.addHandler(() => this.invalidate());
//
this.invalidate();
}
//
refresh() {
this._table.innerHTML = '';
//
// create header
if (this._view.itemCount > 0) {
let item = this._view.items[0], head = this._table.createTHead(), row = head.insertRow();
//
row.className = 'active';
Object.keys(item).forEach(key => {
let cell = document.createElement('th');
cell.className = 'text-center';
//
// header text
let txt = document.createTextNode(wijmo.toHeaderCase(key) + '\u00A0'); // +
cell.appendChild(txt);
//
// sort button
let btn = document.createElement('button');
btn.className = 'btn btn-default';
btn.textContent = this._getSort(key);
btn.addEventListener('click', () => this._toggleSort(key));
cell.appendChild(btn);
//
row.appendChild(cell);
});
}
//
// create body
let body = this._table.createTBody();
this._view.items.forEach(item => {
let row = body.insertRow();
//
if (item == this._view.currentItem) {
row.className = 'success';
}
//
row.addEventListener('click', () => this._moveCurrentTo(row, item));
//
Object.keys(item).forEach(key => {
let cell = row.insertCell(), fmt = this._format[key], val = item[key];
//
cell.textContent = fmt ? wijmo.format(`{val:${fmt}}`, { val: val }) : val;
cell.className = 'text-center';
});
});
}
//
_moveCurrentTo(row, item) {
if (!this._isEditingView && !this._isGroupRow(item)) {
this._view.moveCurrentTo(item);
}
}
//
get _isEditingView() {
return this._view.isEditingItem || this._view.isAddingNew;
}
//
_isGroupRow(item) {
return item instanceof wijmo.CollectionViewGroup;
}
//
_getSort(field) {
let sd = this._view.sortDescriptions;
//
if (sd.length > 0 && sd[0].property === field) {
return sd[0].ascending ? '▲' : '▼';
}
//
return '◇';
}
//
_toggleSort(field) {
let sd = this._view.sortDescriptions, ascending = true;
//
if (sd.length > 0 && sd[0].property === field) {
ascending = !sd[0].ascending;
}
//
// remove any old sort descriptors and add the new one
sd.splice(0, sd.length, new wijmo.SortDescription(field, ascending));
}
}
TableView.controlTemplate = '<table class="table table-condensed table-bordered" wj-part="table"></table>';
(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);
