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?

score 6 · Answer 1 · edited Jul 31 '14 at 07:43

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.

The up and down arrow still selects multiple regardless of the if the shift key is pressed or not. — getsetbro, Jul 14 '14 at 14:35
note that the gridOptions.multiSelect property must be true with this approach — Paul Taylor, Sep 12 '14 at 10:28

score 4 · Accepted Answer · edited Oct 22 '13 at 18:22

4

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...

edited Oct 22 '13 at 18:22

Cédric Guillemette

2,394
1
14
22

answered Oct 11 '13 at 12:34

Dar

89
1
1
9

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 – mabi Oct 17 '13 at 09:16
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) – Rob Dennis Dec 05 '13 at 23:38

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

2 Answers2

Linked