c1.documentReady(function () {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var products = [
{ id: 0, name: 'Widget', unitPrice: 23.43 },
{ id: 1, name: 'Gadget', unitPrice: 12.33 },
{ id: 2, name: 'Doohickey', unitPrice: 53.07 },
];
var data = [];
var dt = new Date();
for (var i = 0; i < 100; i++) {
data.push({
id: i,
date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
country: countries[Math.floor(Math.random() * countries.length)],
product: products[Math.floor(Math.random() * products.length)].name,
amount: Math.random() * 10000 - 5000,
discount: Math.random() / 4
});
}
var theGrid = wijmo.Control.getControl('#theGrid');
theGrid.itemsSource = data;
new CustomGridEditor(theGrid, 'date', wijmo.input.InputDate, {
format: 'd'
});
new CustomGridEditor(theGrid, 'time', wijmo.input.InputTime, {
format: 't',
min: new Date(2000, 1, 1, 7, 0),
max: new Date(2000, 1, 1, 22, 0),
step: 30
});
new CustomGridEditor(theGrid, 'country', wijmo.input.ComboBox, {
itemsSource: countries
});
new CustomGridEditor(theGrid, 'amount', wijmo.input.InputNumber, {
format: 'n2',
step: 10
});
var multiColumnEditor = new CustomGridEditor(theGrid, 'product', wijmo.input.ComboBox, {
headerPath: 'name',
displayMemberPath: 'name',
itemsSource: products
});
var combo = multiColumnEditor.control;
combo.listBox.formatItem.addHandler(function (s, e) {
e.item.innerHTML = '<table><tr>' +
'<td style="width:30px;text-align:right;padding-right:6px">' + e.data.id + '</td>' +
'<td style="width:100px;padding-right:6px"><b>' + e.data.name + '</b></td>' +
'<td style="width:80px;text-align:right;padding-right:6px">' +
wijmo.Globalize.format(e.data.unitPrice, 'c') +
'</td>' +
'</tr></table>';
});
});
var CustomGridEditor = (function () {
function CustomGridEditor(flex, binding, edtClass, options) {
var _this = this;
this._grid = flex;
this._col = flex.columns.getColumn(binding);
this._ctl = new edtClass(document.createElement('div'), options);
this._grid.beginningEdit.addHandler(this._beginningEdit, this);
this._grid.scrollPositionChanged.addHandler(this._closeEditor, this);
this._ctl.addEventListener(this._ctl.hostElement, 'keydown', function (e) {
switch (e.keyCode) {
case wijmo.Key.Tab:
case wijmo.Key.Enter:
_this._closeEditor(true);
_this._grid.focus();
var evt = document.createEvent('HTMLEvents');
evt.initEvent('keydown', true, true);
evt['ctrlKey'] = e.ctrlKey;
evt['shiftKey'] = e.shiftKey;
evt['keyCode'] = e.keyCode;
_this._grid.hostElement.dispatchEvent(evt);
break;
case wijmo.Key.Escape:
_this._closeEditor(false);
_this._grid.focus();
break;
}
});
this._ctl.lostFocus.addHandler(function () {
setTimeout(function () {
if (!_this._ctl.containsFocus()) {
_this._closeEditor(true);
}
});
});
this._grid.addEventListener(this._grid.hostElement, 'keydown', function (e) {
_this._openDropDown = false;
if (e.keyCode == wijmo.Key.F4 ||
(e.altKey && (e.keyCode == wijmo.Key.Down || e.keyCode == wijmo.Key.Up))) {
_this._openDropDown = true;
_this._grid.startEditing(true);
e.preventDefault();
}
}, true);
window.addEventListener('resize', function () {
if (_this._ctl.containsFocus()) {
_this._closeEditor(true);
_this._grid.focus();
}
});
}
Object.defineProperty(CustomGridEditor.prototype, "control", {
get: function () {
return this._ctl;
},
enumerable: true,
configurable: true
});
CustomGridEditor.prototype._beginningEdit = function (grid, args) {
var _this = this;
if (grid.columns[args.col] != this._col) {
return;
}
var evt = args.data;
if (evt && evt.keyCode == wijmo.Key.Delete) {
return;
}
args.cancel = true;
this._rng = args.range;
var rc = grid.getCellBoundingRect(args.row, args.col);
wijmo.setCss(this._ctl.hostElement, {
position: 'absolute',
left: rc.left - 1 + pageXOffset,
top: rc.top - 1 + pageYOffset,
width: rc.width + 1,
height: grid.rows[args.row].renderHeight + 1,
borderRadius: '0px'
});
if (!wijmo.isUndefined(this._ctl['text'])) {
this._ctl['text'] = grid.getCellData(this._rng.row, this._rng.col, true);
}
else {
throw 'Can\'t set editor value/text...';
}
var ecv = wijmo.tryCast(grid.collectionView, 'IEditableCollectionView'), item = grid.rows[args.row].dataItem;
if (ecv && item) {
setTimeout(function () {
ecv.editItem(item);
}, 210);
}
document.body.appendChild(this._ctl.hostElement);
this._ctl.focus();
setTimeout(function () {
var key = (evt && evt.charCode > 32)
? String.fromCharCode(evt.charCode)
: null;
if (key) {
var input = _this._ctl.hostElement.querySelector('input');
if (input instanceof HTMLInputElement) {
input.value = key;
wijmo.setSelectionRange(input, key.length, key.length);
var evtInput = document.createEvent('HTMLEvents');
evtInput.initEvent('input', true, false);
input.dispatchEvent(evtInput);
}
}
else {
_this._ctl.focus();
}
if (_this._openDropDown && _this._ctl instanceof wijmo.input.DropDown) {
_this._ctl.isDroppedDown = true;
}
}, 50);
};
CustomGridEditor.prototype._closeEditor = function (saveEdits) {
if (this._rng) {
var grid = this._grid, ctl = this._ctl, host = ctl.hostElement;
var e = new wijmo.grid.CellEditEndingEventArgs(grid.cells, this._rng);
grid.onCellEditEnding(e);
if (saveEdits) {
if (!wijmo.isUndefined(ctl['value'])) {
this._grid.setCellData(this._rng.row, this._rng.col, ctl['value']);
}
else if (!wijmo.isUndefined(ctl['text'])) {
this._grid.setCellData(this._rng.row, this._rng.col, ctl['text']);
}
else {
throw 'Can\'t get editor value/text...';
}
this._grid.invalidate();
}
if (ctl instanceof wijmo.input.DropDown) {
ctl.isDroppedDown = false;
}
host.parentElement.removeChild(host);
this._rng = null;
grid.onCellEditEnded(e);
}
};
return CustomGridEditor;
}());
