expose menuButtonTemplate and menuItemTemplate

Author: Stephen Cavender

src/js/core/factories/GridOptions.js

@@ -521,6 +521,28 @@ angular.module('ui.grid')
       */
       baseOptions.gridMenuTemplate = baseOptions.gridMenuTemplate || 'ui-grid/uiGridMenu';
 
+            /**
+       * @ngdoc string
+       * @name menuButtonTemplate
+       * @propertyOf ui.grid.class:GridOptions
+       * @description 'ui-grid/ui-grid-menu-button' by default. When provided, this setting uses a custom grid menu button
+       * template. Can be set to either the name of a template file 'menuButton_template.html', inline html
+       * <pre>'<div class="ui-grid-menu-button" ng-click="customToggleMenu()"><div class="ui-grid-icon-container"><i class="ui-grid-icon=menu">&nbsp;</i></div></div><div ui-grid-menu menu-items="menuItems"></div>'</pre>, or the id
+       * of a precompiled template (TBD how to use this).  Refer to the custom footer tutorial for more information.
+       */
+      baseOptions.menuButtonTemplate = baseOptions.menuButtonTemplate || 'ui-grid/ui-grid-menu-button';
+
+      /**
+       * @ngdoc string
+       * @name menuItemTemplate
+       * @propertyOf ui.grid.class:GridOptions
+       * @description 'ui-grid/uiGridMenuItem' by default. When provided, this setting uses a custom grid menu item
+       * template. Can be set to either the name of a template file 'menuItem_template.html', inline html
+       * <pre>'<li class="ui-grid-menu-item"><label>{{name}}</label></li>'</pre>, or the id
+       * of a precompiled template (TBD how to use this).  Refer to the custom footer tutorial for more information.
+       */
+      baseOptions.menuItemTemplate = baseOptions.menuItemTemplate || 'ui-grid/uiGridMenuItem';
+
       /**
        * @ngdoc object
        * @name appScopeProvider

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

@@ -258,9 +258,10 @@ describe('ui-grid-menu', function() {
 		});
 	});
 
-	describe('custom gridMenu templates', function() {
+	describe('custom templates', function() {
 		var $timeout;
-		var customGridMenu = '<div ui-grid-menu-custom menu-items="items"></div>';
+    var customGridMenu = '<div ui-grid-menu-custom menu-items="items"></div>';
+    var customGridMenuButton = '<div role="button"></div>';
 
 		beforeEach(inject(function(_$timeout_) {
 			$timeout = _$timeout_;
@@ -270,6 +271,7 @@ describe('ui-grid-menu', function() {
 				var element = angular.element('<div ui-grid="gridOptions"></div>');
 				$scope.gridOptions = {};
 				$scope.gridOptions.gridMenuTemplate = customGridMenu;
+				$scope.gridOptions.menuButtonTemplate = customGridMenuButton;
 				$scope.gridOptions.onRegisterApi = function(gridApi) {
 					$scope.grid = gridApi.grid;
 				};
@@ -285,6 +287,10 @@ describe('ui-grid-menu', function() {
 		it('should have gridMenuTemplate defined in grid options', function() {
 			expect($scope.grid.options.gridMenuTemplate).toEqual(customGridMenu);
 		});
+
+		it('should have menuButtonTemplate defined in grid options', function() {
+			expect($scope.grid.options.menuButtonTemplate).toEqual(customGridMenuButton);
+		});
 	});
 
 	describe('title displayed', function() {

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

@@ -51,6 +51,8 @@ describe('GridOptions factory', function () {
         gridFooterTemplate: 'ui-grid/ui-grid-grid-footer',
         rowTemplate: 'ui-grid/ui-grid-row',
         gridMenuTemplate: 'ui-grid/uiGridMenu',
+        menuButtonTemplate: 'ui-grid/ui-grid-menu-button',
+        menuItemTemplate: 'ui-grid/uiGridMenuItem',
         appScopeProvider: null
       });
     });
@@ -96,6 +98,8 @@ describe('GridOptions factory', function () {
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
         gridMenuTemplate: 'testGridMenu',
+        menuButtonTemplate: 'testMenuButton',
+        menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption',
         appScopeProvider : 'anotherRef'
       };
@@ -139,6 +143,8 @@ describe('GridOptions factory', function () {
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
         gridMenuTemplate: 'testGridMenu',
+        menuButtonTemplate: 'testMenuButton',
+        menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption',
         appScopeProvider : 'anotherRef'
       });
@@ -185,6 +191,8 @@ describe('GridOptions factory', function () {
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
         gridMenuTemplate: 'testGridMenu',
+        menuButtonTemplate: 'testMenuButton',
+        menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption'
       };
       expect( GridOptions.initialize(options) ).toEqual({
@@ -227,6 +235,8 @@ describe('GridOptions factory', function () {
         gridFooterTemplate: 'testGridFooter',
         rowTemplate: 'testRow',
         gridMenuTemplate: 'testGridMenu',
+        menuButtonTemplate: 'testMenuButton',
+        menuItemTemplate: 'testMenuItem',
         extraOption: 'testExtraOption',
         appScopeProvider : null
       });