option to disable GridMenu close on scrolling

Author: Sonakshi Gupta

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

@@ -154,16 +154,20 @@ function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, i18
     // *** Auto hide when click elsewhere ******
       var applyHideMenu = function(event) {
         if ($scope.shown) {
-          if ($scope.col && $scope.col.filterContainer === 'columnMenu') {
-            var elm = document.querySelector('.ui-grid-column-menu').querySelector('[ui-grid-filter]');
-            if (elm && elm.contains(event.target)) {
-              return false;
+          var disableGridMenuHideOnScroll = uiGridCtrl && uiGridCtrl.grid && uiGridCtrl.grid.options ? uiGridCtrl.grid.options.disableGridMenuHideOnScroll : null;
+
+          if (event.type !== 'scroll' || !disableGridMenuHideOnScroll) {
+            if ($scope.col && $scope.col.filterContainer === 'columnMenu') {
+              var elm = document.querySelector('.ui-grid-column-menu').querySelector('[ui-grid-filter]');
+              if (elm && elm.contains(event.target)) {
+                return false;
+              }
             }
-          }
 
-          $scope.$apply(function () {
-            $scope.hideMenu();
-          });
+            $scope.$apply(function () {
+              $scope.hideMenu();
+            });
+          }
         }
       };
 

packages/core/src/js/factories/GridOptions.js

@@ -553,6 +553,14 @@ angular.module('ui.grid')
       */
       baseOptions.gridMenuTemplate = baseOptions.gridMenuTemplate || 'ui-grid/uiGridMenu';
 
+      /**
+       * @ngdoc string
+       * @name disableGridMenuHideOnScroll
+       * @propertyOf ui.grid.class:GridOptions
+       * @description 'false' by default. When provided, this setting disables Grid Menu Hide On Scroll
+       */
+      baseOptions.disableGridMenuHideOnScroll = baseOptions.disableGridMenuHideOnScroll || false;
+
             /**
        * @ngdoc string
        * @name menuButtonTemplate

packages/core/src/js/factories/ScrollEvent.js

@@ -56,6 +56,7 @@
         self.verticalScrollLength = -9999999;
         self.horizontalScrollLength = -999999;
 
+        self.type = 'scroll';
 
         /**
          *  @ngdoc function

packages/core/test/core/factories/GridOptions.spec.js

@@ -56,6 +56,7 @@ describe('GridOptions factory', function () {
         gridMenuTemplate: 'ui-grid/uiGridMenu',
         menuButtonTemplate: 'ui-grid/ui-grid-menu-button',
         menuItemTemplate: 'ui-grid/uiGridMenuItem',
+        disableGridMenuHideOnScroll: false,
         appScopeProvider: null
       });
     });
@@ -107,6 +108,7 @@ describe('GridOptions factory', function () {
         menuButtonTemplate: 'testMenuButton',
         menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption',
+        disableGridMenuHideOnScroll: true,
         appScopeProvider : 'anotherRef'
       };
       expect( GridOptions.initialize(options) ).toEqual({
@@ -155,6 +157,7 @@ describe('GridOptions factory', function () {
         menuButtonTemplate: 'testMenuButton',
         menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption',
+        disableGridMenuHideOnScroll: true,
         appScopeProvider : 'anotherRef'
       });
     });
@@ -205,6 +208,7 @@ describe('GridOptions factory', function () {
         gridMenuTemplate: 'testGridMenu',
         menuButtonTemplate: 'testMenuButton',
         menuItemTemplate: 'testMenuItem',
+        disableGridMenuHideOnScroll: false,
         extraOption: 'testExtraOption'
       };
       expect( GridOptions.initialize(options) ).toEqual({
@@ -253,6 +257,7 @@ describe('GridOptions factory', function () {
         menuButtonTemplate: 'testMenuButton',
         menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption',
+        disableGridMenuHideOnScroll: false,
         appScopeProvider : null
       });
     });