CODEWITHSUNDEEP
angular-ui-grid
Christian Nagel
Christian Nagel

Reputation: 201

Prevent Keypress-events ( f.e. enter-key)

I'm looking for stop keyboard events from ui-grid . For example: ui-grid navigates to the next row by pressing the enter-key, here i need to prevent this action. Even using a cellTemplate which implements an ng-keypress-listener, I can't stop ui-grid to switch to the next row by hitting the enter-key.

Does anyone know how prevent ui-grid or switch off the keyboards events?

Upvotes: 2

Views: 2282

Answers (2)

Christian Nagel
Christian Nagel

Reputation: 201

It works like charm, thanks a lot :)

I use now a decorator service to overwrite the method getDirection from ui-grid.

FYI. Here is the code:

angular
.module('app')
.config(function($provide){
  $provide.decorator('uiGridCellNavService', function ($delegate, uiGridConstants, uiGridCellNavConstants) {
    var getDirection = $delegate.getDirection;
    $delegate.getDirection = function (evt) {
      if (evt.keyCode === uiGridConstants.keymap.LEFT ||
        (evt.keyCode === uiGridConstants.keymap.TAB && evt.shiftKey)) {
        return uiGridCellNavConstants.direction.LEFT;
      }
      if (evt.keyCode === uiGridConstants.keymap.RIGHT ||
        evt.keyCode === uiGridConstants.keymap.TAB) {
        return uiGridCellNavConstants.direction.RIGHT;
      }

      if (evt.keyCode === uiGridConstants.keymap.UP ||
        (evt.keyCode === uiGridConstants.keymap.ENTER && evt.shiftKey) ) {
        return uiGridCellNavConstants.direction.UP;
      }

      if (evt.keyCode === uiGridConstants.keymap.PG_UP){
        return uiGridCellNavConstants.direction.PG_UP;
      }
      // delete listener for key ENTER
      if (evt.keyCode === uiGridConstants.keymap.DOWN) {
        return uiGridCellNavConstants.direction.DOWN;
      }
      // original code
      /*if (evt.keyCode === uiGridConstants.keymap.DOWN ||
        evt.keyCode === uiGridConstants.keymap.ENTER) {
        return uiGridCellNavConstants.direction.DOWN;
      }*/

      if (evt.keyCode === uiGridConstants.keymap.PG_DOWN){
        return uiGridCellNavConstants.direction.PG_DOWN;
      }

      return null;
    };
    return $delegate;
  })

Upvotes: 4

CMR
CMR

Reputation: 933

You can adjust the default functionality by overwriting their services/directives.

I created a Plunkr for your case.

Copy the whole service containing the keyListener for cellNavigation and remove the ENTER-watcher.

getDirection: function (evt) {
      if (evt.keyCode === uiGridConstants.keymap.LEFT ||
        (evt.keyCode === uiGridConstants.keymap.TAB && evt.shiftKey)) {
        return uiGridCellNavConstants.direction.LEFT;
      }
      if (evt.keyCode === uiGridConstants.keymap.RIGHT ||
        evt.keyCode === uiGridConstants.keymap.TAB) {
        return uiGridCellNavConstants.direction.RIGHT;
      }

      /*
      if (evt.keyCode === uiGridConstants.keymap.UP ||
        (evt.keyCode === uiGridConstants.keymap.ENTER && evt.shiftKey) ) {
        return uiGridCellNavConstants.direction.UP;
      }
      */

      if (evt.keyCode === uiGridConstants.keymap.PG_UP){
        return uiGridCellNavConstants.direction.PG_UP;
      }

      /*
      if (evt.keyCode === uiGridConstants.keymap.DOWN ||
        evt.keyCode === uiGridConstants.keymap.ENTER && !(evt.ctrlKey || evt.altKey)) {
        return uiGridCellNavConstants.direction.DOWN;
      }
      */

      if (evt.keyCode === uiGridConstants.keymap.PG_DOWN){
        return uiGridCellNavConstants.direction.PG_DOWN;
      }

      return null;
},

The direction.UP and direction.DOWN checks are commented out but everything else works as expected. I appended the service at the bottom of the Plunkr app.js.

Upvotes: 0

Related Questions