ngGrid multiselect canceling current selection

Question

I would like to configure ng-grid to obtain the following multi selection behaviour:

1. Selecting a single row cancels the previous selection

2. Selecting with Ctrl or Shift adds to current selection (like selecting files in windows explorer for example)

Details:

• if I select a row, the whole row is selected (enableRowSelection)
• if I select a row holding Ctrl the new row is selected in addition to the currently selected rows
• if I select holding Shift the range is selected
• if I select a row without pressing any key I would like the row to be selected and the others unselected

ng-grid works as expected except for the last step (unselecting the other rows when clicking a row)

Asgard

according to all the demos on their page (angular-ui.github.io/ng-grid) clicking a selected row deselects it. Are you seeing any javascript errors in the console because it should be working – Mccomas

@Mccomas thank you for your comment: selecting again a row indeed deselects it, but what I need is that clicking a row that is not selected deselects all others (and selects the clicked one) – Asgard

So, you would like to toggle the $scope.gridOptions {multiSelect:false} to $scope.gridOptions {multiSelect:true} when Ctrl+Click is used ? Sounds like the same question as this previous SO question: stackoverflow.com/questions/19090613 where @Dar worked out a dirty solution for that. (just using his own words :) – Feucht

Yes @Feucht , exactly the behavior I asked for. I also made a temporary fix like Dar's but hoped for a cleaner solution. IMHO this should be the default – Asgard

Answer 1

You can add this to your grid's controller:

$scope.multiSelect = false;
// control/shift/meta keydown enables multiselect
$('.your-grid').keydown(function (e) {
    if ((e.keyCode === 16 || e.keyCode === 17 || e.metaKey || e.keyCode === 224 || e.keyCode === 91 || e.keyCode === 93) && !$scope.multiSelect) {
        $scope.multiSelect = true;
    }
});
// keyup disables it
$('.your-grid').keyup(function (e) {
    if (e.keyCode === 16 || e.keyCode === 17 || e.metaKey || e.keyCode === 224 || e.keyCode === 91 || e.keyCode === 93) {
        $scope.multiSelect = false;
    }
});

$scope.gridOptions.beforeSelectionChange = function () {
    // if the shift/ctrl/meta keys aren't pressed, then each selection
    // will clear all the previous ones
    if (!$scope.multiSelect) {
        for (var i = 0; i < $scope.gridOptions.data.length; ++i) {
            $scope.gridOptions.selectRow(i, false);
        }
    }
    return true;
};

Where your view would look something like:

<div class="your-grid" ng-grid="gridOptions">

The reason for all of the different keyCode values is that Mac's command key's keycode is browser dependant. You can use e.metaKey, but that doesn't work for everything (Mac's Chrome does not I believe). So to be safe you can check all of those keyCode values which are described in the SO post: How does one capture a Mac's command key via JavaScript?

This solution is inspired by: AngularJS Change multiple row selection ng-grid attribute on key down and another SO post that I can't find at the moment.

Hendiadys