Our blazing fast Grid component built with pure JavaScript


Post by panu »

How can we override the functionality of pressing Enter -key while editing a cell in a grid?

Is there a specific event that is raised and the default actions preventable (going to the next row, same column)?

What we want to accomplish, for example, we have a grid with 5 columns:

  1. We go to edit column 1
  2. We press enter
  3. We want to navigate to column X on the same row and start editing there (similar to ‘editNextOnEnterPress’)
  4. We press enter
    a. We want to go to column 1 of the next row
    b. If we’re on the last row, we want to create a new row (via our own logic from backend, not with the config ‘addNewAtEnd’ since it doesn’t support async)

Post by alex.l »

Hi panu,

On https://bryntum.com/docs/grid/api/Grid/feature/CellEdit#event-finishCellEdit
event you could check if
editorContext.record is equal to grid.store.last and that you need.
as well as start editing in a cell you need

grid.startEditing({
        record : record,
        field  : 'name'
    });

Of course, you can disable editNextOnEnterPress and addNewAtEnd to prevent default behaviour.

All the best,
Alex


Post by panu »

We tried this and in theory all looked promising. But...

We tried the following code in your basic demo here https://bryntum.com/examples/grid/celledit/

   grid.on('finishCellEdit', ({editorContext}) => { grid.startEditing({row: 0, field: 'team'}); });

It seems that the startEditing actually starts editing but these editNextOnEnterPress and addNewAtEnd does not do what we want. The editNextOnEnterPress still do the navigation but just not start edit on the cell.

The problem is with both enter and with tabulator. We didn't find a way to disable the default tabulator and enter behavior/navigate. So what happens is that the startEditing starts edit row 0 and column 'team', but then there is the "navigate" on enter which makes the 2nd row column active.


Post by tasnim »

Ah, I've got an error there, so I've created a ticket here it is https://github.com/bryntum/support/issues/5183
Try this code:

listeners : {
        finishcelledit({editorContext}) {
            // temp workarond
            grid.features.cellEdit.cleanupAfterEdit(editorContext);
            grid.startEditing({record: grid.store.first, field: 'team'})

   },
   cancelcelledit({editorContext}) {
    // will be triggered if no change in a cell
   }
},

Good Luck :),
Tasnim


Post by panu »

finishcelledit({editorContext}) {
    // temp workarond
    grid.features.cellEdit.cleanupAfterEdit(editorContext);
    grid.startEditing({record: grid.store.first, field: 'team'})

},
cancelcelledit({editorContext}) {
    // will be triggered if no change in a cell
    grid.features.cellEdit.cleanupAfterEdit(editorContext);
    grid.startEditing({record: grid.store.first, field: 'team'})
}

used this on the same example. And it goes to right column when there is no changes to cell. With edit it still jumps to same 2nd row column as before. Also tabulator seems to skip these handlers alltogether and just move to next column on same row.

Maybe the ticket solves this, but do you think there could be other workaround meanwhile?

and as a clarification with your exact listeners code it does not work either...


Post by alex.l »

Hi panu,

Sorry, I missed your TAB override requirements in my recommendations.
TAB is basically jumps to next editable cell and has no configs to change that.
In practice, you'll need to go into the code to change that, because we don't support this so deep.
Very basic override for TAB may looks like

const grid = new Grid({

appendTo : 'container',

features : {
    cellEdit : {
        editNextOnEnterPress : false,
        addNewAtEnd : false,
        onTabKeyPress: (event) => {
            event.preventDefault();
            grid.features.cellEdit.finishEditing();
        }
    },

But all these code together won't be working in case you click in cell (don't use keys), because click will start editing itself.
So, try to prevent default behavior

       finishcelledit({editorContext}) {
            event.preventDefault();
            grid.features.cellEdit.cleanupAfterEdit(editorContext);
            grid.startEditing({record: grid.store.first, field: 'team'})

   },
   cancelcelledit({editorContex}) {
        event.preventDefault();
        grid.startEditing({record: grid.store.first, field: 'team'})
   }
},

It should be working all together, even if we do not support this kind of customization initially.

All the best,
Alex


Post by panu »

We managed to find workaround with following code. Pretty sure that with the listeners approach preventing the Enter-event was too late and at least we didn't get it working with the demo.

(this.grid.features.cellEdit as any).onEnterKeyPress = event => {
	event.preventDefault();
	grid.features.cellEdit.finishEditing();
	grid.startEditing({ record: grid.store.first, field: 'team' });
};

We didn't end up needing the "onTabKeyPress" since the tab behavior was in the end already good.

Also we faced a problem since CellEditConfig does not define "onTabKeyPress" or "onEnterKeyPress" so you can't define this inside the feature configuration without errors.

Thank you for the tips. I am not sure what part if any you need or want to change in your end. Or if there is a bug. Maybe include those two methods in the CellEditConfig just in case those are not intentionally left out.


Post by marcio »

Hello panu,

Glad that you figure out a solution. We don't have that onTabKeyPress and onEnterKeyPress cause in theory it shouldn't be overridden, but we'll discuss that internally to check if that should be the case to add or not in the CellEditConfig.

Best regards,
Márcio


Post Reply