Our blazing fast Grid component built with pure JavaScript
One way I could implement Ctrl-C and Ctrl-V and Insert and Delete would be
document.onkeydown, grab a reference to the grid, get the selection and then work from there.
Is there an better way e.g. by adding key listeners to the grid only? Similar to like in Dojo where you connect a listener to a component.
Or just wait a release or two, we are almost done implementing this
Hello,
There is a ticket to implement such feature: https://github.com/bryntum/support/issues/888
Meanwhile you can write your own solution. Here is an example you can try in Basic demo:
import Grid from '../../lib/Grid/view/Grid.js';
import EventHelper from '../../lib/Core/helper/EventHelper.js';
new Grid({
listeners: {
paint() {
EventHelper.on({
keydown: 'onCopyPaste',
element: this.bodyElement,
thisObj: this
});
}
},
onCopyPaste(event) {
if (!event.handled && event.ctrlKey) {
switch (event.key.toLowerCase()) {
case 'c':
if (this.focusedCell) {
// save record ID to a custom property
this.store.copyBuffer = this.focusedCell.id;
}
break;
case 'v':
if (this.store.copyBuffer) {
const record = this.store.getById(this.store
.copyBuffer);
if (record) {
const clonedRecord = record.copy({
name: `${record.name} (copy)`
});
if (this.focusedCell) {
const index = this.store.indexOf(this
.focusedCell.id);
this.store.insert(index + 1,
clonedRecord);
} else {
this.store.add(clonedRecord);
}
}
}
break;
}
}
},
Запись активности на экране 2021-03-17 в 19.06.51.gif (606.29 KiB) Viewed 951 times
https://www.bryntum.com/docs/grid/#Core/helper/EventHelper#function-on-static
https://www.bryntum.com/docs/grid/#Core/data/Model#function-copy
https://www.bryntum.com/docs/grid/#Core/data/Store#function-add
Pavlo Miklashevych
Sr. Frontend Developer
Great that will do until the feature comes out thanks!
A caveat there is that the paint
listener should be once : true
The "paint" concept is that the widget becomes visible in any way. So for example it's in a Popup
which is shown, or inside a TabPanel
and the tab it is in becomes activated. This may happen any number of times during app operation.