Merge pull request #1711 from mathiasdose/feature1211

Issue #1211 Multi select when using Ctrl-Key and Shift-Key
angular-ui · Oct 7, 2014 · 3d4e857 · 3d4e857
2 parents 26c9c91 + 0b09e61
commit 3d4e857
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/misc/tutorial/210_selection.ngdoc b/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:

diff --git a/src/features/selection/js/selection.js b/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();
               });
             }