LIDOR SYSTEMS

Advanced User Interface Controls and Components

Keyboard Navigation of Rows in AngularJS Grid

Created: 14 October 2015

Keyboard navigation is fully supported in AngularJS Tree Grid directive. Two modes are available: row navigation or cell navigation. In following sections of this article, you will learn about basic keyboard navigation in grid directive and also how to highlight rows using keyboard.

TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps


In above demo, you can choose whether you want to navigate only among rows or between cells. When row navigation is selected, you can also highlight rows by pressing the SPACE key.

Row Navigation using Up/Down Arrow Keys

By default, keyboard navigation is enabled in Grid directive. This option is controlled by allowFocus property, which determines whether the grid can accept the input focus. If you change this property value to false, the keyboard navigation will be disabled. Additionally, each row object has enabled field that allows you to enable or disable a specific row. When row is disabled, it will be excluded from navigation.

When some row in the grid has the input focus (by selecting a row), a focus frame is shown around row space indicating that row is focused. If UP or DOWN arrow key is pressed, the focus will be moved to the row above or below currently focused row. In this way, you can navigate among rows using keyboard.

Expand/Collapse of Rows using Left/Right Arrow Keys

During row navigation, if RIGHT arrow key is pressed, the row will expand showing its child rows. In similar way, if LEFT arrow key is pressed, the row will collapse, hiding its child rows.

You can navigate between all rows (parent and child), in whole tree hierarchy, by simple using the arrow keys from the keyboard. Each row that is disabled, is skipped during this process.

Highlight Rows using SPACE key

Whenever a row has the input focus, we can handle the keyDown event and add custom operation when some key is pressed. In case of highlighting a row, we will use the SPACE key:

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeGridService", function($scope, $timeout, $gridService){

// The name of the grid used as unique identifier

$scope.gridName = "gridSample";

// Holds a list of all grid columns

$scope.columns = [];

// Holds a list of all grid rows

$scope.rows = [];

 

$scope.onKeyDown = function(e){

// Handle when SPACE key is pressed

switch (e.event.keyCode){

case 32: // SPACE_BAR

// Use a custom field (named mark), to set that row is highlighted or not

e.row.mark = e.row.mark != undefined ? !e.row.mark : true;

 

// Change the appearance of focused row using a custom style

if (e.row.mark)

e.row.style = {

general: {

normal: 'row-highlight',

hovered: 'row-highlight',

selected: 'row-highlight'

}

}

else

e.row.style = null;

 

// Update the changes to the Grid

var refreshTimer = $timeout(function(){

$gridService.refresh($scope.gridName, e.row);

 

$timeout.cancel(refreshTimer);

}, 1);

break;

}

}

}]);

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" key-down="onKeyDown(e)" allow-cell-focus="cellFocus" selection-mode="none"></iui-treegrid>

Whenever a SPACE key is pressed, the background color of the row is changed to mark it as highlighted. Next, we can move to some other row using keyboard, and highlight it in the same way. If SPACE key is pressed, again the row is removed from highlight state.

Cell Navigation using Arrow Keys

In similar way as for rows, the keyboard navigation is also available for grid cells. In this case, whenever a cell has the input focus, the focus frame is shown around cell space to indicate that it is focused.

During cell navigation, we can use up/down arrow keys to move to cells above or below current cell, or by using left/right arrow keys to move the focus to cells left or right from the currently focused cell.

If a cell is focused and it belongs to the expanding column, and the RIGHT key is pressed, the row to which this cells belongs will expand. If the RIGHT key is pressed for the second time, the focus will be moved to the cell on the right. In similar way for the LEFT key, it will collapse or move the focus to the cell on the left.

We can also handle keyDown event for cells, and add custom operations, like marking cell as selected. For example, we can add a incell editor for a cell which is activated whenever the ENTER key is pressed for focused cell. More information about this case is available here: InCell Editing in AngularJS Grid

Conclusion

AngularJS Grid fully supports keyboard navigation among rows and cells. During this process, you can expand/collapse a row, move the focus to specific cell using only keyboard and perform custom actions by handling the keyDown, keyUp or keyPress events.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.