Stop Keyboard Navigation While Editing in Ag Grid
Posted By : Manisha Kirodiwal | 26-Jun-2018
If you specify a cell editor, you may be able to disable some of the keyboard navigation networks.
Because different cellular operators want different requirements for what the network does, it is up to the cell editor to decide what event it wants the network to handle and which it does not.
You can stop standard action on certain events by using the following two options:
- Stop
propogation of the event to the ag grid in the cell editor. - Use colDef.suppressKeyEvent () to tell Ag grid to do nothing.
Option 1 - Stop propagation
If you do not want the network to trade an event, call event.stopPropagation (). The advantage of this method is that your cell editor takes care of everything well to create reusable cellular players.
The following code snippet is one that you can include in a simple text editor that prevents the network from making navigation.
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_PAGE_UP = 33;
var KEY_PAGE_DOWN = 34;
var KEY_PAGE_HOME = 36;
var KEY_PAGE_END = 35;
eInputDomElement.addEventListener('keydown', function(event) {
var keyCode = event.keyCode;
var isNavigationKey = keyCode===KEY_LEFT || keyCode===KEY_RIGHT || keyCode===KEY_UP
|| keyCode===KEY_DOWN || keyCode===KEY_PAGE_DOWN || keyCode===KEY_PAGE_UP
|| keyCode===KEY_PAGE_HOME || keyCode===KEY_PAGE_END;
if (isNavigationKey) {
// this stops the grid from receiving the event and executing keyboard navigation
event.stopPropagation();
}
}
Option 2 - suppress keyboard event
If you use
var KEY_UP = 38;
var KEY_DOWN = 40;
colDef.suppressKeyboardEvent = function(params) {
console.log('cell is editing: ' + params.editing);
console.log('keyboard event:', params.event);
// return true (to suppress) if editing and user hit up/down keys
var keyCode = params.event.keyCode;
var gridShouldDoNothing = params.editing && (keyCode===KEY_UP || keyCode===KEY_DOWN);
return gridShouldDoNothing;
}
The params for suppressKeyboardEvent( ) are as follows:
interface SuppressKeyboardEventParams {
// the keyboard event the grid received
event: KeyboardEvent;
// whether the cell is editing or not
editing: boolean;
// these are same as normal
node: RowNode;
column: Column;
colDef: ColDef;
context: any;
api: GridApi;
columnApi: Co lumnApi;
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Manisha Kirodiwal
Manisha is a Web Application developer and she is good in working with Angular, TypeScript , JavaScript and Jquery. In free time she loves to dance and cooking.