Add Custom Keyboard Events in AngularJS

Background:

Developers may want to add their own custom keyboard events to FlexGrid if the events aren't already available. By using FlexGrid's hostElement, its possible to add your own custom keyboard events.

Steps to Complete:

1. Tie a method to the 'initialized' property of FlexGrid

2. Inside this method, add a keydown eventListener to listen for user input

3. Tie actions to certain keycodes, so that they execute when the keys are pressed

Getting Started

Tie a method to the 'initialized' property of FlexGrid

First, we'll need to tie a method with the initialized property of the FlexGrid. This is so that, when the FlexGrid is initialized, we can tie the eventListener directly to the hostElement of the FlexGrid.

<wj-flex-chart items-source="data" initialized="initialized(s, e)">

Inside this method, add a keydown eventListener to listen for user input

Second, we'll need a way to see if the user pressed any keys. To do this, we'll add an eventListener that listens for the 'keydown' event.

$scope.initialized = function(s, e) {
    s.hostElement.addEventListener('keydown', function(e) {}, true);
}

Tie actions to certain keycodes, so that they execute when the keys are pressed

Finally, inside of the eventListener we determine what will be done based on the keys the user presses. In this sample, if the user presses Ctrl+Home, then the FlexGrid will set the selection to the first cell. If they press Ctrl+End, then the FlexGrid will set the selection to the last cell.

s.hostElement.addEventListener('keydown', function(e) {
    if(e.ctrlKey) {
        if(e.keyCode == wijmo.Key.Home) {
            s.select(0, 0);
            e.prevendDefault();
        } else if(e.keyCode == wijmo.Key.End) {
            s.select(s.rows.length - 1, s.columns.length - 1);
            e.preventDefault();
        }
    }
}

You can find a live sample of the project outlined in this article here: http://jsfiddle.net/JParksGC/wxs7y3uf/