Merge pull request #1711 from mathiasdose/feature1211

Issue #1211 Multi select when using Ctrl-Key and Shift-Key

Author: PaulL1

misc/tutorial/210_selection.ngdoc

@@ -19,6 +19,10 @@ can select a different row (which will unselect the current row), but you cannot
 by clicking on it.  This means that at least one row is always selected, other than when you first open the grid.  If 
 necessary you could programatically select the first row upon page open.  The second grid demonstrates this.
 
+If `multiSelect: true`, another option `modifierKeysToMultiSelect` may be used. If set to true will allow selecting multiple 
+row only if the Ctrl-Key, Cmd-Key (Mac) or the Shift-Key is used when selecting, set to false will allow selecting multiple 
+rows always. 
+
 @example
 Two examples are provided, the first with rowHeaderSelection and multi-select, the second without.
 
@@ -46,19 +50,23 @@ Two examples are provided, the first with rowHeaderSelection and multi-select, t
         $scope.info = {};
 
         $scope.toggleMultiSelect = function() {
-           $scope.gridApi.selection.setMultiSelect(!$scope.gridApi.grid.options.multiSelect);
+          $scope.gridApi.selection.setMultiSelect(!$scope.gridApi.grid.options.multiSelect);
+        };
+
+        $scope.toggleModifierKeysToMultiSelect = function() {
+          $scope.gridApi.selection.setModifierKeysToMultiSelect(!$scope.gridApi.grid.options.modifierKeysToMultiSelect);
         };
 
         $scope.selectAll = function() {
-                   $scope.gridApi.selection.selectAllRows();
+          $scope.gridApi.selection.selectAllRows();
         };
 
-         $scope.clearAll = function() {
-                         $scope.gridApi.selection.clearSelectedRows();
-              };
+        $scope.clearAll = function() {
+          $scope.gridApi.selection.clearSelectedRows();
+        };
 
         $scope.toggleRow1 = function() {
-                         $scope.gridApi.selection.toggleRowSelection($scope.gridOptions.data[0]);
+          $scope.gridApi.selection.toggleRowSelection($scope.gridOptions.data[0]);
         };
 
         $scope.gridOptions.onRegisterApi = function(gridApi){
@@ -82,6 +90,7 @@ Two examples are provided, the first with rowHeaderSelection and multi-select, t
       ];
 
       $scope.gridOptions.multiSelect = false;
+      $scope.gridOptions.modifierKeysToMultiSelect = false;
       $scope.gridOptions.noUnselect = true;
       $scope.gridOptions.onRegisterApi = function( gridApi ) {
         $scope.gridApi = gridApi;
@@ -98,15 +107,18 @@ Two examples are provided, the first with rowHeaderSelection and multi-select, t
   </file>
   <file name="index.html">
     <div ng-controller="MainCtrl">
-     <button type="button" class="btn btn-success" ng-click="toggleMultiSelect()">Toggle multiSelect</button>  <strong>MultiSelect:</strong> <span ng-bind="gridApi.grid.options.multiSelect"></span>
-      <button type="button" class="btn btn-success" ng-click="toggleRow1()">Toggle Row 0</button> </span>
+      <button type="button" class="btn btn-success" ng-click="toggleMultiSelect()">Toggle multiSelect</button>  <strong>MultiSelect:</strong> <span ng-bind="gridApi.grid.options.multiSelect"></span>
+      <button type="button" class="btn btn-success" ng-click="toggleRow1()">Toggle Row 0</button>
       <br/>
       <br/>
-      <button type="button" class="btn btn-success" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button> </span>
-      <button type="button" class="btn btn-success" ng-click="clearAll()">Clear All</button> </span>
-      <br>
+      <button type="button" class="btn btn-success" ng-click="toggleModifierKeysToMultiSelect()">Toggle modifierKeysToMultiSelect</button>  <strong>ModifierKeysToMultiSelect:</strong> <span ng-bind="gridApi.grid.options.modifierKeysToMultiSelect"> </span>     
+      <br/>
+      <br/>
+      <button type="button" class="btn btn-success" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button>
+      <button type="button" class="btn btn-success" ng-click="clearAll()">Clear All</button>
+      <br/>
+
       <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
-      
     </div>
     <div ng-controller="SecondCtrl">
       Single selection grid without rowHeader:

src/features/selection/js/selection.js

@@ -178,6 +178,16 @@
                  */
                 setMultiSelect: function (multiSelect) {
                   grid.options.multiSelect = multiSelect;
+                },
+                /**
+                 * @ngdoc function
+                 * @name setModifierKeysToMultiSelect
+                 * @methodOf  ui.grid.selection.api:PublicApi
+                 * @description Sets the current gridOption.modifierKeysToMultiSelect to true or false
+                 * @param {bool} modifierKeysToMultiSelect true to only allow multiple rows when using ctrlKey or shiftKey is used
+                 */
+                setModifierKeysToMultiSelect: function (modifierKeysToMultiSelect) {
+                  grid.options.modifierKeysToMultiSelect = modifierKeysToMultiSelect;
                 }
               }
             }
@@ -226,6 +236,14 @@
            *  <br/>Defaults to false
            */
           gridOptions.noUnselect = gridOptions.noUnselect === true;
+          /**
+           *  @ngdoc object
+           *  @name modifierKeysToMultiSelect
+           *  @propertyOf  ui.grid.selection.api:GridOptions
+           *  @description Enable multiple row selection only when using the ctrlKey or shiftKey. Requires multiSelect to be true.
+           *  <br/>Defaults to false
+           */
+          gridOptions.modifierKeysToMultiSelect = gridOptions.modifierKeysToMultiSelect === true;
           /**
            *  @ngdoc object
            *  @name enableRowHeaderSelection
@@ -397,10 +415,12 @@
           $scope.selectButtonClick = function(row, evt) {
             if (evt.shiftKey) {
               uiGridSelectionService.shiftSelect(self, row, self.options.multiSelect);
-
+            }
+            else if (evt.ctrlKey || evt.metaKey) {
+              uiGridSelectionService.toggleRowSelection(self, row, self.options.multiSelect, self.options.noUnselect); 
             }
             else {
-              uiGridSelectionService.toggleRowSelection(self, row, self.options.multiSelect, self.options.noUnselect );
+              uiGridSelectionService.toggleRowSelection(self, row, (self.options.multiSelect && !self.options.modifierKeysToMultiSelect), self.options.noUnselect);
             }
           };
         }
@@ -470,11 +490,13 @@
               $elm.on('click', function (evt) {
                 if (evt.shiftKey) {
                   uiGridSelectionService.shiftSelect($scope.grid, $scope.row, $scope.grid.options.multiSelect);
-
                 }
-                else {
+                else if (evt.ctrlKey || evt.metaKey) {
                   uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, $scope.grid.options.multiSelect, $scope.grid.options.noUnselect);
                 }
+                else {
+                  uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, ($scope.grid.options.multiSelect && !$scope.grid.options.modifierKeysToMultiSelect), $scope.grid.options.noUnselect);
+                }
                 $scope.$apply();
               });
             }