NgGrid multi-selector cancel current selection

Question

I would like to configure ng-grid to get the following multi-user behavior:

• Single row selection overrides previous selection

• A selection with Ctrl or Shift adds to the current selection (for example, selecting files in Windows Explorer, for example)

More details:

• if I select a row, the whole row is selected (enableRowSelection)
• If I select a line containing Ctrl , in addition to the currently selected lines, a new line will be selected
• If I choose to hold Shift , the range is selected
• If I select a row without pressing any key, I would like the row to be selected and the rest not to be selected

ng-grid works as expected, except for the last step (deselecting other rows when a row is pressed)

Answer 1

You can add this to the grid 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; }; 

If your view looks something like this:

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

The reason for all the different key code values ​​is that the Mac command line key code is browser dependent. You can use e.metaKey, but this does not work at all (Mac Chrome, I do not believe it). Therefore, to be safe, you can check all of these KeyCode values ​​that are described in the SO message: How to capture a Mac command key using JavaScript?

This solution is inspired by: AngularJS Change the ng-grid attribute to select multiple rows in the down key and another SO record that I cannot find at the moment.