feat(core): expose GridMenuTemplate

Author: vwongg

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

@@ -43,8 +43,15 @@ function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, i18
     templateUrl: 'ui-grid/uiGridMenu',
     replace: false,
     link: function ($scope, $elm, $attrs, uiGridCtrl) {
-
       $scope.dynamicStyles = '';
+      if (uiGridCtrl && uiGridCtrl.grid && uiGridCtrl.grid.options && uiGridCtrl.grid.options.gridMenuTemplate) {
+        var gridMenuTemplate = uiGridCtrl.grid.options.gridMenuTemplate;
+        gridUtil.getTemplate(gridMenuTemplate).then(function (contents) {
+          var template = angular.element(contents);
+          var newElm = $compile(template)($scope);
+          $elm.replaceWith(newElm);
+        });
+      }
 
       var setupHeightStyle = function(gridHeight) {
         //menu appears under header row, so substract that height from it's total
@@ -61,7 +68,7 @@ function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, i18
         setupHeightStyle(uiGridCtrl.grid.gridHeight);
         uiGridCtrl.grid.api.core.on.gridDimensionChanged($scope, function(oldGridHeight, oldGridWidth, newGridHeight, newGridWidth) {
           setupHeightStyle(newGridHeight);
-		});
+        });
       }
 
       $scope.i18n = {

src/js/core/factories/GridOptions.js

@@ -494,6 +494,15 @@ angular.module('ui.grid')
        */
       baseOptions.rowTemplate = baseOptions.rowTemplate || 'ui-grid/ui-grid-row';
 
+      /**
+      * @ngdoc string
+      * @name gridMenuTemplate
+      * @propertyOf ui.grid.class:GridOptions
+      * @description 'ui-grid/uiGridMenu' by default. When provided, this setting uses a
+      * custom grid menu template.
+      */
+      baseOptions.gridMenuTemplate = baseOptions.gridMenuTemplate || 'ui-grid/uiGridMenu';
+
       /**
        * @ngdoc object
        * @name appScopeProvider

test/unit/core/directives/ui-grid-menu.spec.js

@@ -268,4 +268,33 @@ describe('ui-grid-menu', function() {
       expect(hideSpy).toHaveBeenCalled();
     });
   });
+
+  describe('custom gridMenu templates', function () {
+    var $timeout;
+    var customGridMenu = '<div ui-grid-menu-custom menu-items="items"></div>';
+
+    beforeEach(inject(function (_$timeout_) {
+      $timeout = _$timeout_;
+    }));
+    beforeEach( function() {
+      recompile = function () {
+        var element = angular.element('<div ui-grid="gridOptions"></div>');
+        $scope.gridOptions = {};
+        $scope.gridOptions.gridMenuTemplate = customGridMenu;
+        $scope.gridOptions.onRegisterApi = function(gridApi) {
+          $scope.grid = gridApi.grid;
+        };
+        $timeout(function () {
+          $compile(element)($scope);
+        });
+        $timeout.flush();
+      };
+
+      recompile();
+    });
+
+    it('should have gridMenuTemplate defined in grid options', function() {
+      expect($scope.grid.options.gridMenuTemplate).toEqual(customGridMenu);
+    });
+  });
 });

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

@@ -51,6 +51,7 @@ describe('GridOptions factory', function () {
         footerTemplate: 'ui-grid/ui-grid-footer',
         gridFooterTemplate: 'ui-grid/ui-grid-grid-footer',
         rowTemplate: 'ui-grid/ui-grid-row',
+        gridMenuTemplate: 'ui-grid/uiGridMenu',
         appScopeProvider: null
       });
     });
@@ -96,6 +97,7 @@ describe('GridOptions factory', function () {
         footerTemplate: 'testFooter',
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
+        gridMenuTemplate: 'testGridMenu',
         extraOption: 'testExtraOption',
         appScopeProvider : 'anotherRef'
       };
@@ -139,6 +141,7 @@ describe('GridOptions factory', function () {
         footerTemplate: 'testFooter',
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
+        gridMenuTemplate: 'testGridMenu',
         extraOption: 'testExtraOption',
         appScopeProvider : 'anotherRef'
       });
@@ -185,6 +188,7 @@ describe('GridOptions factory', function () {
         footerTemplate: 'testFooter',
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
+        gridMenuTemplate: 'testGridMenu',
         extraOption: 'testExtraOption'
       };
       expect( GridOptions.initialize(options) ).toEqual({
@@ -227,6 +231,7 @@ describe('GridOptions factory', function () {
         footerTemplate: 'testFooter',
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
+        gridMenuTemplate: 'testGridMenu',
         extraOption: 'testExtraOption',
         appScopeProvider : null
       });