Our blazing fast Grid component built with pure JavaScript


Post by gregc »

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.


Post by mats »

Or just wait a release or two, we are almost done implementing this :)


Post by pmiklashevich »

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
Запись активности на экране 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


Post by gregc »

Great that will do until the feature comes out thanks!


Post by Animal »

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.


Post Reply