misc/tutorial/210_selection.ngdoc

@@ -101,7 +101,7 @@ Two examples are provided, the first with rowHeaderSelection and multi-select, t
         };
     }]);
 
-    app.controller('SecondCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
+    app.controller('SecondCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
       $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
 
       $scope.gridOptions.columnDefs = [
@@ -118,6 +118,12 @@ Two examples are provided, the first with rowHeaderSelection and multi-select, t
         $scope.gridApi = gridApi;
       };
 
+      $scope.toggleRowSelection = function() {
+        $scope.gridApi.selection.clearSelectedRows();
+        $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
+        $scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.OPTIONS);
+      };
+
       $http.get('/data/500_complex.json')
         .success(function(data) {
           $scope.gridOptions.data = data;
@@ -143,7 +149,9 @@ Two examples are provided, the first with rowHeaderSelection and multi-select, t
       <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
     </div>
     <div ng-controller="SecondCtrl">
-      Single selection grid without rowHeader:
+      Single selection grid without rowHeader, and allowing rowSelection to be toggled on and off dynamically:
+      <br/>
+      <button type="button" class="btn btn-success" ng-click="toggleRowSelection()">Toggle rowSelection</button>  <strong>rowSelection:</strong> <span ng-bind="gridApi.grid.options.enableRowSelection"></span>
       <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
     </div>
   </file>

src/features/pinning/js/pinning.js

@@ -38,7 +38,7 @@
 
         /**
          *  @ngdoc object
-         *  @name enableRowSelection
+         *  @name enablePinning
          *  @propertyOf  ui.grid.pinning.api:GridOptions
          *  @description Enable pinning for the entire grid.  
          *  <br/>Defaults to true

src/features/selection/js/selection.js

@@ -649,45 +649,74 @@
           scope: false,
           link: function ($scope, $elm, $attrs) {
 
-            if ($scope.grid.options.enableRowSelection && !$scope.grid.options.enableRowHeaderSelection) {
-              $elm.addClass('ui-grid-disable-selection');
-              registerRowSelectionEvents();
-            }
-
-            function registerRowSelectionEvents() {
-              var touchStartTime = 0;
-              var touchTimeout = 300;
-              var selectCells = function(evt){
-                if (evt.shiftKey) {
-                  uiGridSelectionService.shiftSelect($scope.grid, $scope.row, $scope.grid.options.multiSelect);
-                }
-                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();
-              };
-
-              $elm.on('touchstart', function(event) {
-                touchStartTime = (new Date()).getTime();
-              });
-
-              $elm.on('touchend', function (evt) {
-                var touchEndTime = (new Date()).getTime();
-                var touchTime = touchEndTime - touchStartTime;
+            var touchStartTime = 0;
+            var touchTimeout = 300;
+            var selectCells = function(evt){
+              if (evt.shiftKey) {
+                uiGridSelectionService.shiftSelect($scope.grid, $scope.row, $scope.grid.options.multiSelect);
+              }
+              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();
+            };
 
-                if (touchTime < touchTimeout ) {
-                  // short touch
-                  selectCells(evt);
-                }
-              });
+            var touchStart = function(evt){
+              touchStartTime = (new Date()).getTime();
+            };
+
+            var touchEnd = function(evt) {
+              var touchEndTime = (new Date()).getTime();
+              var touchTime = touchEndTime - touchStartTime;
 
-              $elm.on('click', function (evt) {
+              if (touchTime < touchTimeout ) {
+                // short touch
                 selectCells(evt);
-              });
+              }
+            };
+
+            function registerRowSelectionEvents() {
+              if ($scope.grid.options.enableRowSelection && !$scope.grid.options.enableRowHeaderSelection) {
+                $elm.addClass('ui-grid-disable-selection');
+                $elm.on('touchstart', touchStart);
+                $elm.on('touchend', touchEnd);
+                $elm.on('click', selectCells);
+
+                $scope.registered = true;
+              }
             }
+
+            function deregisterRowSelectionEvents() {
+              if ($scope.registered){
+                $elm.removeClass('ui-grid-disable-selection');
+
+                $elm.off('touchstart', touchStart);
+                $elm.off('touchend', touchEnd);
+                $elm.off('click', selectCells);
+
+                $scope.registered = false;
+              }
+            }
+
+            registerRowSelectionEvents();
+            // register a dataChange callback so that we can change the selection configuration dynamically
+            // if the user changes the options
+            var callbackId = $scope.grid.registerDataChangeCallback( function() {
+              if ( $scope.grid.options.enableRowSelection && !$scope.grid.options.enableRowHeaderSelection &&
+                   !$scope.registered ){
+                registerRowSelectionEvents();
+              } else if ( ( !$scope.grid.options.enableRowSelection || $scope.grid.options.enableRowHeaderSelection ) &&
+                          $scope.registered ){
+                deregisterRowSelectionEvents();
+              }
+            }, [uiGridConstants.dataChange.OPTIONS] );
+
+            $scope.$on( '$destroy', function() {
+              $scope.grid.deregisterDataChangCallback( callbackId );
+            });
           }
         };
       }]);

src/js/core/constants.js

@@ -89,7 +89,8 @@
       ALL: 'all',
       EDIT: 'edit',
       ROW: 'row',
-      COLUMN: 'column'
+      COLUMN: 'column',
+      OPTIONS: 'options'
     },
     scrollbars: {
       NEVER: 0,

src/js/core/directives/ui-grid.js

@@ -104,7 +104,6 @@
         }
       }
 
-
       $scope.$on('$destroy', function() {
         dataWatchCollectionDereg();
         columnDefWatchCollectionDereg();

src/js/core/factories/Grid.js

@@ -291,16 +291,18 @@ angular.module('ui.grid')
    * - when the api is called to inform us of a change, the declared type of that change is used
    * - when a cell edit completes, the EDIT callbacks are triggered
    * - when the columnDef watch fires, the COLUMN callbacks are triggered
+   * - when the options watch fires, the OPTIONS callbacks are triggered
    * 
    * For a given event:
-   * - ALL calls ROW, EDIT, COLUMN and ALL callbacks
+   * - ALL calls ROW, EDIT, COLUMN, OPTIONS and ALL callbacks
    * - ROW calls ROW and ALL callbacks
    * - EDIT calls EDIT and ALL callbacks
    * - COLUMN calls COLUMN and ALL callbacks
+   * - OPTIONS calls OPTIONS and ALL callbacks
    * 
    * @param {function(grid)} callback function to be called
    * @param {array} types the types of data change you want to be informed of.  Values from 
-   * the uiGridConstants.dataChange values ( ALL, EDIT, ROW, COLUMN ).  Optional and defaults to
+   * the uiGridConstants.dataChange values ( ALL, EDIT, ROW, COLUMN, OPTIONS ).  Optional and defaults to
    * ALL 
    * @returns {string} uid of the callback, can be used to deregister it again
    */
@@ -332,10 +334,10 @@ angular.module('ui.grid')
    * @name callDataChangeCallbacks
    * @methodOf ui.grid.class:Grid
    * @description Calls the callbacks based on the type of data change that
-   * has occurred. Always calls the ALL callbacks, calls the ROW, EDIT, and COLUMN callbacks if the 
+   * has occurred. Always calls the ALL callbacks, calls the ROW, EDIT, COLUMN and OPTIONS callbacks if the 
    * event type is matching, or if the type is ALL.
    * @param {number} type the type of event that occurred - one of the 
-   * uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN)
+   * uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN, OPTIONS)
    */
   Grid.prototype.callDataChangeCallbacks = function callDataChangeCallbacks(type, options) {
     angular.forEach( this.dataChangeCallbacks, function( callback, uid ){
@@ -363,7 +365,8 @@ angular.module('ui.grid')
     if ( type === constants.ALL || 
          type === constants.COLUMN ||
          type === constants.EDIT ||
-         type === constants.ROW ){
+         type === constants.ROW ||
+         type === constants.OPTIONS ){
       grid.callDataChangeCallbacks( type );
     } else {
       gridUtil.logError("Notified of a data change, but the type was not recognised, so no action taken, type was: " + type);