TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
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.
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.
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.
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.
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(){
}, 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.
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
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.