AngularJS Changing the ng-grid attribute to select multiple rows when a key is pressed

Question

I have the following grid defined in my view

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

And I want to enable multiSelect only when I press the ctrl key. Therefore, I define the 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 the multiSelect parameter to true.

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

When I launch the application, the value of multiSelect changes after pressing ctrl. But I still cannot make multiple choices.

I tried using a variable for multiSelect, but it does not change anything.

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

Is there any simple solution? Or what am I missing in my code?

Answer 1

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

The solution lasts, but it works.

Based on mabi comments ...

• Without support for the Shift key
• Shift-enabled

Answer 2

The approved “hacker” answer was not clean enough for us, so we built a slightly more reliable version that relies on the event parameter on beforeSelectionChange , instead of making unpleasant key bindings. This also works for any grid you add this callback to, since it does not need to refer to any specific custom CSS classes or identifiers, but simply uses robust 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 check if we are performing a multi selector operation (hold down the ctrl key, shift key or use the multiselect flag), if so, let the multi-segment happen. If the user simply clicks elsewhere in the row and multiselect is active, we remove any current selection, so after that only one target row will be selected.