Modify the tab key and enter key behavior when cellNav is used with ui-grid in Angular JS

Question

I am using ui-grid with ui-grid-selection and ui-grid-cellNav modules. I am able to navigate through the grid according to the keys behavior mentioned in documentation.

I want to change the behaviour of TAB and ENTER keys when using with cellNav.

Can someone please suggest a way to do it.

When TAB is pressed I want to come out of focus from the grid. When ENTER is pressed I want to open hyperlink of the selected row.

Answer 1

You can change the behaviour of key pressing in gridApi.cellNav.on.viewPortKeyDown function.

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
        gridApi.cellNav.on.viewPortKeyDown($scope, function (event, newRowCol) {
            if (event.key == 'Tab') {
                event.preventDefault();
                $('.ui-grid-cell-focus').removeClass('ui-grid-cell-focus');
            }
            if (event.key == 'enter')
                event.preventDefault();
       })
   },
   keyDownOverrides: [{
          keyCode: 13,
          ctrlKey: false
      }, //enter
      {
          keyCode: 9,
          ctrlKey: false
      } //tab
   ] 
}

Removing ui-grid-cell-focus gives only visual effect but, using arrows, you can still go to surrounding cells. If you don't want that, you can try to programmatically change focused element or prevent default action of other navigation keys.

I don't exactly undestand what do you want to do on enter press.