AngularJS Change multiple row selection ng-grid attribute on key down

Question

I have a following grid defined in my View

<div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div>

And I want to allow multiSelect only if a ctrl key is pressed. So I define multiSelect attribute as false in the Controller.

$scope.resultsOptions = {
    data: 'searchData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    enableHighlighting: true,
    enableRowSelection: true
};

In the same controller I have the following code that sets multiSelect to true.

$("#resultsGrid").keydown(function (e) {
    if (e.ctrlKey) {
        $scope.resultsOptions.multiSelect = true;
        $scope.$apply();
    }
});

When I launch the application multiSelect value changes after pressing ctrl. But I am still can not make a multiple selection.

I tried to use variable for multiSelect, but it doe not change a thing.

The following example also does not change multiSelect attribute. But it changes the grid header. http://plnkr.co/edit/RwYSG4?p=preview

Is there any simple solution? Or what do I miss in my code?

Microchemistry

Answer 1

Since it is impossible to change some grid options on the fly (https://github.com/angular-ui/ng-grid/issues/386). I decided to manually deselect every element if ctrl is not pressed in beforeSelectionChange attribute of the grid.

The solution is durty, but it works.

Based of mabi's comment...

• Without support for Shift key
• With support for Shift key

Microchemistry

good solution, I replaced e.keyCode == 17 with (e.keyCode == 16 || e.keyCode == 17) to handle also the SHIFT case. I think that this should be the default behavior of ng-grid – Carnauba

one thing to note, is that this doesn't account for the fact that on Mac OS X the ctrl equivalent is command (so, e.metaKey) – Alwin

Answer 2

The approved "hacky" answer wasn't clean enough for us so we built a slightly more robust version relying on the event parameter on beforeSelectionChange instead of doing nasty key bindings. This also works for any grid you add this event callback to as it does not need to reference any specific custom CSS classes or IDs, but just uses reliable ng-grid classes.

beforeSelectionChange: function(rowItem, event){
    if(!event.ctrlKey && !event.shiftKey && $scope.multiSelect && 
        !$(event.srcElement).is(".ngSelectionCheckbox"))
    {
          angular.forEach($scope.myData, function(data, index){
              $scope.gridOptions.selectRow(index, false);
          });
    }
    return true;
}

What this does is simply checking if we are doing a multiselect operation (holding ctrl key, shift key or using the multiselect checkbox), if yes, let multiselect happen. If the user is just clicking anywhere else on a row, and multiselect is active we remove any current selection so just the one target row will be selected afterwards.

Tellurate

The up and down arrow still selects multiple regardless of the if the shift key is pressed or not. – Cockloft

note that the gridOptions.multiSelect property must be true with this approach – Soviet