slickgrid 2.4.5 → 2.4.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9ff99f00455831f57630e3801f3f876efbb7b7ee
-  data.tar.gz: 1ffe1c0bfad0c20f25f18d0e9ecf99adacaf3759
+  metadata.gz: c41868db700a74173821c903442e06312d69d5c7
+  data.tar.gz: 6e457a267a195e537b30ada036b56897319b38e6
 SHA512:
-  metadata.gz: cde211d3104b85d486afa9dab9260787529aff8ab7514c2ea1e39b8eb048b30a16732964b3ee8c37e64bcffd8c6acd0e96f8fe7ef86cb3e29dac22ed6fb88b30
-  data.tar.gz: d6f02024be59b054c070c4e567be992333c26f73b72a6851de8d77844570b857008247d57e3ad890048b91a6f20125176ca49cabf213eaedddd7f69eb7915f85
+  metadata.gz: a02a998314d83f1e3c6c52323ac9bae4be8db96a16d0e736d7e9edc66194cd4dbe2da682b3c356329e5adc6172aecc79436d27dc1201ffa8aae3e112fd1970b1
+  data.tar.gz: 3f51ea1dfa2d700e93d21128fbfc0bdb236cb59e8d69095890c8835efe90c979e0a35dd6e6344c4f928c6ca60d22b8254affe0a333e4b2635c1db49d7f629664

data/slickgrid.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |gem|
   gem.name          = "slickgrid"
-  gem.version       = "2.4.5"
+  gem.version       = "2.4.14"
   gem.authors       = ["Erlingur Þorsteinsson"]
   gem.email         = ["erlingur@rsf.is"]
   gem.description   = %q{SlickGrid (6pac fork) gem for Rails}

data/vendor/assets/javascripts/slickgrid/controls/columnpicker.js

@@ -1,36 +1,36 @@
-  /***
-   * A control to add a Column Picker (right+click on any column header to reveal the column picker)
-   *
-   * USAGE:
-   *
-   * Add the slick.columnpicker.(js|css) files and register it with the grid.
-   *
-   * Available options, by defining a columnPicker object:
-   *
-   *  var options = {
-   *    enableCellNavigation: true,
-   *    columnPicker: {
-   *      columnTitle: "Columns",                 // default to empty string
-   *
-   *      // the last 2 checkboxes titles
-   *      hideForceFitButton: false,              // show/hide checkbox near the end "Force Fit Columns" (default:false)
-   *      hideSyncResizeButton: false,            // show/hide checkbox near the end "Synchronous Resize" (default:false)
-   *      forceFitTitle: "Force fit columns",     // default to "Force fit columns"
-   *      headerColumnValueExtractor: "Extract the column label" // default to column.name
-   *      syncResizeTitle: "Synchronous resize",  // default to "Synchronous resize"
-   *    }
-   *  };
-   *
-   * @class Slick.Controls.ColumnPicker
-   * @constructor
-   */
-
-'use strict';
+/***
+ * A control to add a Column Picker (right+click on any column header to reveal the column picker)
+ *
+ * USAGE:
+ *
+ * Add the slick.columnpicker.(js|css) files and register it with the grid.
+ *
+ * Available options, by defining a columnPicker object:
+ *
+ *  var options = {
+ *    enableCellNavigation: true,
+ *    columnPicker: {
+ *      columnTitle: "Columns",                 // default to empty string
+ *
+ *      // the last 2 checkboxes titles
+ *      hideForceFitButton: false,              // show/hide checkbox near the end "Force Fit Columns" (default:false)
+ *      hideSyncResizeButton: false,            // show/hide checkbox near the end "Synchronous Resize" (default:false)
+ *      forceFitTitle: "Force fit columns",     // default to "Force fit columns"
+ *      headerColumnValueExtractor: "Extract the column label" // default to column.name
+ *      syncResizeTitle: "Synchronous resize",  // default to "Synchronous resize"
+ *    }
+ *  };
+ *
+ * @class Slick.Controls.ColumnPicker
+ * @constructor
+ */
 
 (function ($) {
+  'use strict';
   function SlickColumnPicker(columns, grid, options) {
     var _grid = grid;
     var _options = options;
+    var $columnTitleElm;
     var $list;
     var $menu;
     var columnCheckboxes;
@@ -56,13 +56,13 @@
       _options = $.extend({}, defaults, options);
 
       $menu = $("<div class='slick-columnpicker' style='display:none' />").appendTo(document.body);
-      var $close = $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
+      $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
 
       // user could pass a title on top of the columns list
-      if(_options.columnPickerTitle || (_options.columnPicker && _options.columnPicker.columnTitle)) {
+      if (_options.columnPickerTitle || (_options.columnPicker && _options.columnPicker.columnTitle)) {
         var columnTitle = _options.columnPickerTitle || _options.columnPicker.columnTitle;
-        var $title = $("<div class='title'/>").append(columnTitle);
-        $title.appendTo($menu);
+        $columnTitleElm = $("<div class='title'/>").append(columnTitle);
+        $columnTitleElm.appendTo($menu);
       }
 
       $menu.on("click", updateColumn);
@@ -96,9 +96,10 @@
       columnCheckboxes = [];
 
       var $li, $input;
-      var columnLabel;
+      var columnLabel, excludeCssClass;
       for (var i = 0; i < columns.length; i++) {
-        $li = $("<li />").appendTo($list);
+        excludeCssClass = columns[i].excludeFromColumnPicker ? "hidden" : "";
+        $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
         $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
         columnCheckboxes.push($input);
 
@@ -111,7 +112,7 @@
         } else {
           columnLabel = defaults.headerColumnValueExtractor(columns[i]);
         }
-        
+
         $("<label />")
           .html(columnLabel)
           .prepend($input)
@@ -127,9 +128,9 @@
         $li = $("<li />").appendTo($list);
         $input = $("<input type='checkbox' />").data("option", "autoresize");
         $("<label />")
-            .text(forceFitTitle)
-            .prepend($input)
-            .appendTo($li);
+          .text(forceFitTitle)
+          .prepend($input)
+          .appendTo($li);
         if (_grid.getOptions().forceFitColumns) {
           $input.attr("checked", "checked");
         }
@@ -140,19 +141,19 @@
         $li = $("<li />").appendTo($list);
         $input = $("<input type='checkbox' />").data("option", "syncresize");
         $("<label />")
-            .text(syncResizeTitle)
-            .prepend($input)
-            .appendTo($li);
+          .text(syncResizeTitle)
+          .prepend($input)
+          .appendTo($li);
         if (_grid.getOptions().syncColumnCellResize) {
           $input.attr("checked", "checked");
         }
       }
 
       $menu
-          .css("top", e.pageY - 10)
-          .css("left", e.pageX - 10)
-          .css("max-height", $(window).height() - e.pageY -10)
-          .fadeIn(_options.fadeSpeed);
+        .css("top", e.pageY - 10)
+        .css("left", e.pageX - 10)
+        .css("max-height", $(window).height() - e.pageY - 10)
+        .fadeIn(_options.fadeSpeed);
 
       $list.appendTo($menu);
     }
@@ -167,7 +168,7 @@
       var current = _grid.getColumns().slice(0);
       var ordered = new Array(columns.length);
       for (var i = 0; i < ordered.length; i++) {
-        if ( _grid.getColumnIndex(columns[i].id) === undefined ) {
+        if (_grid.getColumnIndex(columns[i].id) === undefined) {
           // If the column doesn't return a value from getColumnIndex,
           // it is hidden. Leave it in this position.
           ordered[i] = columns[i];
@@ -179,22 +180,29 @@
       columns = ordered;
     }
 
+    /** Update the Titles of each sections (command, customTitle, ...) */
+    function updateAllTitles(gridMenuOptions) {
+      if ($columnTitleElm && $columnTitleElm.text) {
+        $columnTitleElm.text(gridMenuOptions.columnTitle);
+      }
+    }
+
     function updateColumn(e) {
       if ($(e.target).data("option") == "autoresize") {
         if (e.target.checked) {
-          _grid.setOptions({forceFitColumns:true});
+          _grid.setOptions({ forceFitColumns: true });
           _grid.autosizeColumns();
         } else {
-          _grid.setOptions({forceFitColumns:false});
+          _grid.setOptions({ forceFitColumns: false });
         }
         return;
       }
 
       if ($(e.target).data("option") == "syncresize") {
         if (e.target.checked) {
-          _grid.setOptions({syncColumnCellResize:true});
+          _grid.setOptions({ syncColumnCellResize: true });
         } else {
-          _grid.setOptions({syncColumnCellResize:false});
+          _grid.setOptions({ syncColumnCellResize: false });
         }
         return;
       }
@@ -213,7 +221,7 @@
         }
 
         _grid.setColumns(visibleColumns);
-        onColumnsChanged.notify({columns: visibleColumns, grid: _grid});
+        onColumnsChanged.notify({ columns: visibleColumns, grid: _grid });
       }
     }
 
@@ -227,10 +235,11 @@
       "init": init,
       "getAllColumns": getAllColumns,
       "destroy": destroy,
+      "updateAllTitles": updateAllTitles,
       "onColumnsChanged": onColumnsChanged
     };
   }
 
   // Slick.Controls.ColumnPicker
-  $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
+  $.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
 })(jQuery);

data/vendor/assets/javascripts/slickgrid/controls/gridmenu.js

@@ -1,448 +1,462 @@
-  /***
-   * A control to add a Grid Menu (hambuger menu on top-right of the grid)
-   *
-   * USAGE:
-   *
-   * Add the slick.gridmenu.(js|css) files and register it with the grid.
-   *
-   * To specify a menu in a column header, extend the column definition like so:
-   * var gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options);
-   *
-   * Available grid options, by defining a gridMenu object:
-   *
-   *  var options = {
-   *    enableCellNavigation: true,
-   *    gridMenu: {
-   *      customTitle: "Custom Menus",                // default to empty string
-   *      columnTitle: "Columns",                     // default to empty string
-   *      iconImage: "../slickgrid/drag-handle.png",     // this is the Grid Menu icon (hamburger icon)
-   *      iconCssClass: "fa fa-bars",                 // you can provide iconImage OR iconCssClass
-   *      leaveOpen: false,                           // do we want to leave the Grid Menu open after a command execution? (false by default)
-   *      menuWidth: 18,                              // width that will be use to resize the column header container (18 by default)
-   *      resizeOnShowHeaderRow: false,               // false by default
-   *
-   *      // the last 2 checkboxes titles
-   *      hideForceFitButton: false,                  // show/hide checkbox near the end "Force Fit Columns"
-   *      hideSyncResizeButton: false,                // show/hide checkbox near the end "Synchronous Resize"
-   *      forceFitTitle: "Force fit columns",         // default to "Force fit columns"
-   *      syncResizeTitle: "Synchronous resize",      // default to "Synchronous resize"
-   *
-   *      customItems: [
-   *        {
-   *          // custom menu item options
-   *        },
-   *        {
-   *          // custom menu item options
-   *        }
-   *      ]
-   *    }
-   *  };
-   *
-   *
-   * Available custom menu item options:
-   *    title:        Menu item text.
-   *    divider:      Whether the current item is a divider, not an actual command.
-   *    disabled:     Whether the item is disabled.
-   *    tooltip:      Item tooltip.
-   *    command:      A command identifier to be passed to the onCommand event handlers.
-   *    iconCssClass: A CSS class to be added to the menu item icon.
-   *    iconImage:    A url to the icon image.
-   *
-   *
-   * The plugin exposes the following events:
-   *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
-   *      * ONLY works with a jQuery event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu)
-   *        Event args:
-   *            grid:     Reference to the grid.
-   *            column:   Column definition.
-   *            menu:     Menu options.  Note that you can change the menu items here.
-   *
-   *    onMenuClose:      Fired when the menu is closing.
-   *        Event args:
-   *            grid:     Reference to the grid.
-   *            column:   Column definition.
-   *            menu:     Menu options.  Note that you can change the menu items here.
-   *
-   *    onCommand:    Fired on menu item click for buttons with 'command' specified.
-   *        Event args:
-   *            grid:     Reference to the grid.
-   *            column:   Column definition.
-   *            command:  Button command identified.
-   *            button:   Button options.  Note that you can change the button options in your
-   *                      event handler, and the column header will be automatically updated to
-   *                      reflect them.  This is useful if you want to implement something like a
-   *                      toggle button.
-   *
-   *
-   * @param options {Object} Options:
-   *    buttonCssClass:   an extra CSS class to add to the menu button
-   *    buttonImage:      a url to the menu button image (default '../slickgrid/down.gif')
-   * @class Slick.Controls.GridMenu
-   * @constructor
-   */
-
-  'use strict';
-
-  (function ($) {
-    // register namespace
-    $.extend(true, window, {
-      "Slick": {
-        "Controls": {
-          "GridMenu": SlickGridMenu
-        }
+/***
+ * A control to add a Grid Menu (hambuger menu on top-right of the grid)
+ *
+ * USAGE:
+ *
+ * Add the slick.gridmenu.(js|css) files and register it with the grid.
+ *
+ * To specify a menu in a column header, extend the column definition like so:
+ * var gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options);
+ *
+ * Available grid options, by defining a gridMenu object:
+ *
+ *  var options = {
+ *    enableCellNavigation: true,
+ *    gridMenu: {
+ *      customTitle: "Custom Menus",                // default to empty string
+ *      columnTitle: "Columns",                     // default to empty string
+ *      iconImage: "../slickgrid/drag-handle.png",     // this is the Grid Menu icon (hamburger icon)
+ *      iconCssClass: "fa fa-bars",                 // you can provide iconImage OR iconCssClass
+ *      leaveOpen: false,                           // do we want to leave the Grid Menu open after a command execution? (false by default)
+ *      menuWidth: 18,                              // width that will be use to resize the column header container (18 by default)
+ *      resizeOnShowHeaderRow: false,               // false by default
+ *
+ *      // the last 2 checkboxes titles
+ *      hideForceFitButton: false,                  // show/hide checkbox near the end "Force Fit Columns"
+ *      hideSyncResizeButton: false,                // show/hide checkbox near the end "Synchronous Resize"
+ *      forceFitTitle: "Force fit columns",         // default to "Force fit columns"
+ *      syncResizeTitle: "Synchronous resize",      // default to "Synchronous resize"
+ *
+ *      customItems: [
+ *        {
+ *          // custom menu item options
+ *        },
+ *        {
+ *          // custom menu item options
+ *        }
+ *      ]
+ *    }
+ *  };
+ *
+ *
+ * Available custom menu item options:
+ *    title:        Menu item text.
+ *    divider:      Whether the current item is a divider, not an actual command.
+ *    disabled:     Whether the item is disabled.
+ *    tooltip:      Item tooltip.
+ *    command:      A command identifier to be passed to the onCommand event handlers.
+ *    iconCssClass: A CSS class to be added to the menu item icon.
+ *    iconImage:    A url to the icon image.
+ *
+ *
+ * The plugin exposes the following events:
+ *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
+ *      * ONLY works with a jQuery event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu)
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            menu:     Menu options.  Note that you can change the menu items here.
+ *
+ *    onMenuClose:      Fired when the menu is closing.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            menu:     Menu options.  Note that you can change the menu items here.
+ *
+ *    onCommand:    Fired on menu item click for buttons with 'command' specified.
+ *        Event args:
+ *            grid:     Reference to the grid.
+ *            column:   Column definition.
+ *            command:  Button command identified.
+ *            button:   Button options.  Note that you can change the button options in your
+ *                      event handler, and the column header will be automatically updated to
+ *                      reflect them.  This is useful if you want to implement something like a
+ *                      toggle button.
+ *
+ *
+ * @param options {Object} Options:
+ *    buttonCssClass:   an extra CSS class to add to the menu button
+ *    buttonImage:      a url to the menu button image (default '../slickgrid/down.gif')
+ * @class Slick.Controls.GridMenu
+ * @constructor
+ */
+
+'use strict';
+
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "Controls": {
+        "GridMenu": SlickGridMenu
       }
-    });
+    }
+  });
+
+  function SlickGridMenu(columns, grid, options) {
+    var _grid = grid;
+    var _gridOptions;
+    var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
+    var _isMenuOpen = false;
+    var _options = options;
+    var _self = this;
+    var $customTitleElm;
+    var $columnTitleElm;
+    var $list;
+    var $button;
+    var $menu;
+    var columnCheckboxes;
+    var _defaults = {
+      hideForceFitButton: false,
+      hideSyncResizeButton: false,
+      fadeSpeed: 250,
+      forceFitTitle: "Force fit columns",
+      menuWidth: 18,
+      resizeOnShowHeaderRow: false,
+      syncResizeTitle: "Synchronous resize"
+    };
+
+    function init(grid) {
+      _gridOptions = grid.getOptions();
+      var gridMenuWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
+      var $header;
+      if (_gridOptions && _gridOptions.frozenColumn && _gridOptions.frozenColumn > 0) {
+        $header = $('.' + _gridUid + ' .slick-header-right');
+      } else {
+        $header = $('.' + _gridUid + ' .slick-header-left');
+      }
+      $header.attr('style', 'width: calc(100% - ' + gridMenuWidth + 'px)');
 
-    function SlickGridMenu(columns, grid, options) {
-      var _grid = grid;
-      var _gridOptions;
-      var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
-      var _isMenuOpen = false;
-      var _options = options;
-      var _self = this;
-      var $list;
-      var $button;
-      var $menu;
-      var columnCheckboxes;
-      var _defaults = {
-        hideForceFitButton: false,
-        hideSyncResizeButton: false,
-        fadeSpeed: 250,
-        forceFitTitle: "Force fit columns",
-        menuWidth: 18,
-        resizeOnShowHeaderRow: false,
-        syncResizeTitle: "Synchronous resize"
-      };
-
-      function init(grid) {
-        _gridOptions = grid.getOptions();
-        var gridMenuWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
-        var $header;
-        if (_gridOptions && _gridOptions.frozenColumn && _gridOptions.frozenColumn > 0 ) {
-          $header = $('.' + _gridUid + ' .slick-header-right');
-        } else {
-          $header = $('.' + _gridUid + ' .slick-header-left');
-        }
-        $header.attr('style', 'width: calc(100% - ' + gridMenuWidth +'px)');
+      // subscribe to the grid, when it's destroyed, we should also destroy the Grid Menu
+      grid.onBeforeDestroy.subscribe(destroy);
 
-        // subscribe to the grid, when it's destroyed, we should also destroy the Grid Menu
-        grid.onBeforeDestroy.subscribe(destroy);
+      // if header row is enabled, we need to resize it's width also
+      var enableResizeHeaderRow = (_options.gridMenu && _options.gridMenu.resizeOnShowHeaderRow != undefined) ? _options.gridMenu.resizeOnShowHeaderRow : _defaults.resizeOnShowHeaderRow;
+      if (enableResizeHeaderRow && _options.showHeaderRow) {
+        var $headerrow = $('.' + _gridUid + '.slick-headerrow');
+        $headerrow.attr('style', 'width: calc(100% - ' + gridMenuWidth + 'px)');
+      }
 
-        // if header row is enabled, we need to resize it's width also
-        var enableResizeHeaderRow = (_options.gridMenu && _options.gridMenu.resizeOnShowHeaderRow != undefined) ? _options.gridMenu.resizeOnShowHeaderRow : _defaults.resizeOnShowHeaderRow;
-        if(enableResizeHeaderRow && _options.showHeaderRow) {
-          var $headerrow = $('.' + _gridUid + '.slick-headerrow');
-          $headerrow.attr('style', 'width: calc(100% - ' + gridMenuWidth +'px)');
-        }
+      $button = $('<button class="slick-gridmenu-button"/>');
+      if (_options.gridMenu && _options.gridMenu.iconCssClass) {
+        $button.addClass(_options.gridMenu.iconCssClass);
+      } else {
+        var iconImage = (_options.gridMenu && _options.gridMenu.iconImage) ? _options.gridMenu.iconImage : "../slickgrid/drag-handle.png";
+        var $btnImage = $('<img src="' + iconImage + '"/>');
+        $btnImage.appendTo($button);
+      }
+      $button.insertBefore($header);
 
-        $button = $('<button class="slick-gridmenu-button"/>');
-        if (_options.gridMenu && _options.gridMenu.iconCssClass) {
-          $button.addClass(_options.gridMenu.iconCssClass);
-        } else {
-          var iconImage = (_options.gridMenu && _options.gridMenu.iconImage) ? _options.gridMenu.iconImage :"../slickgrid/drag-handle.png";
-          var $btnImage = $('<img src="' + iconImage + '"/>');
-          $btnImage.appendTo($button);
-        }
-        $button.insertBefore($header);
+      $menu = $('<div class="slick-gridmenu ' + _gridUid + '" style="display: none" />').appendTo(document.body);
+      $('<button type="button" class="close" data-dismiss="slick-gridmenu" aria-label="Close"><span class="close" aria-hidden="true">&times;</span></button>').appendTo($menu);
 
-        $menu = $('<div class="slick-gridmenu ' + _gridUid + '" style="display: none" />').appendTo(document.body);
-        var $close = $('<button type="button" class="close" data-dismiss="slick-gridmenu" aria-label="Close"><span class="close" aria-hidden="true">&times;</span></button>').appendTo($menu);
+      var $customMenu = $('<div class="slick-gridmenu-custom" />');
+      $customMenu.appendTo($menu);
 
-        var $customMenu = $('<div class="slick-gridmenu-custom" />');
-        $customMenu.appendTo($menu);
+      // user could pass a title on top of the custom section
+      if (_options.gridMenu && _options.gridMenu.customTitle) {
+        $customTitleElm = $('<div class="title"/>').append(_options.gridMenu.customTitle);
+        $customTitleElm.appendTo($customMenu);
+      }
 
-        // user could pass a title on top of the custom section
-        if(_options.gridMenu && _options.gridMenu.customTitle) {
-          var $title = $('<div class="title"/>').append(_options.gridMenu.customTitle);
-          $title.appendTo($customMenu);
-        }
+      populateCustomMenus(_options, $customMenu);
+      populateColumnPicker();
 
-        populateCustomMenus(_options, $customMenu);
-        populateColumnPicker();
+      // Hide the menu on outside click.
+      $(document.body).on("mousedown." + _gridUid, handleBodyMouseDown);
 
-        // Hide the menu on outside click.
-        $(document.body).on("mousedown." + _gridUid, handleBodyMouseDown);
+      // destroy the picker if user leaves the page
+      $(window).on("beforeunload", destroy);
 
-        // destroy the picker if user leaves the page
-        $(window).on("beforeunload", destroy);
+      // add on click handler for the Grid Menu itself
+      $button.on("click." + _gridUid, showGridMenu);
+    }
 
-        // add on click handler for the Grid Menu itself
-        $button.on("click." + _gridUid, showGridMenu);
-      }
+    function destroy() {
+      _self.onBeforeMenuShow.unsubscribe();
+      _self.onMenuClose.unsubscribe();
+      _self.onCommand.unsubscribe();
+      _self.onColumnsChanged.unsubscribe();
+      _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
+      _grid.onBeforeDestroy.unsubscribe();
+      $(document.body).off("mousedown." + _gridUid, handleBodyMouseDown);
+      $("div.slick-gridmenu." + _gridUid).hide(_options.fadeSpeed);
+      $menu.remove();
+      $button.remove();
+    }
 
-      function destroy() {
-        _self.onBeforeMenuShow.unsubscribe();
-        _self.onMenuClose.unsubscribe();
-        _self.onCommand.unsubscribe();
-        _self.onColumnsChanged.unsubscribe();
-        _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
-        _grid.onBeforeDestroy.unsubscribe();
-        $(document.body).off("mousedown." + _gridUid, handleBodyMouseDown);
-        $("div.slick-gridmenu." + _gridUid).hide(_options.fadeSpeed);
-        $menu.remove();
-        $button.remove();
+    function populateCustomMenus(options, $customMenu) {
+      // Construct the custom menu items.
+      if (!options.gridMenu || !options.gridMenu.customItems) {
+        return;
       }
+      for (var i = 0, ln = options.gridMenu.customItems.length; i < ln; i++) {
+        var item = options.gridMenu.customItems[i];
 
-      function populateCustomMenus(options, $customMenu) {
-        // Construct the custom menu items.
-        if(!options.gridMenu || !options.gridMenu.customItems) {
-          return;
+        var $li = $("<div class='slick-gridmenu-item'></div>")
+          .data("command", item.command || '')
+          .data("item", item)
+          .on("click", handleMenuItemClick)
+          .appendTo($customMenu);
+
+        if (item.disabled) {
+          $li.addClass("slick-gridmenu-item-disabled");
         }
-        for (var i = 0, ln = options.gridMenu.customItems.length; i < ln; i++) {
-          var item = options.gridMenu.customItems[i];
 
-          var $li = $("<div class='slick-gridmenu-item'></div>")
-            .data("command", item.command || '')
-            .data("item", item)
-            .on("click", handleMenuItemClick)
-            .appendTo($customMenu);
+        if (item.divider) {
+          $li.addClass("slick-gridmenu-item-divider");
+          continue;
+        }
 
-          if (item.disabled) {
-            $li.addClass("slick-gridmenu-item-disabled");
-          }
+        if (item.tooltip) {
+          $li.attr("title", item.tooltip);
+        }
 
-          if (item.divider) {
-            $li.addClass("slick-gridmenu-item-divider");
-            continue;
-          }
+        var $icon = $("<div class='slick-gridmenu-icon'></div>")
+          .appendTo($li);
 
-          if (item.tooltip) {
-            $li.attr("title", item.tooltip);
-          }
+        if (item.iconCssClass) {
+          $icon.addClass(item.iconCssClass);
+        }
 
-          var $icon = $("<div class='slick-gridmenu-icon'></div>")
-            .appendTo($li);
+        if (item.iconImage) {
+          $icon.css("background-image", "url(" + item.iconImage + ")");
+        }
 
-          if (item.iconCssClass) {
-            $icon.addClass(item.iconCssClass);
-          }
+        var $content = $("<span class='slick-gridmenu-content'></span>")
+          .text(item.title)
+          .appendTo($li);
+      }
+    }
 
-          if (item.iconImage) {
-            $icon.css("background-image", "url(" + item.iconImage + ")");
-          }
+    /** Build the column picker, the code comes almost untouched from the file "slick.columnpicker.js" */
+    function populateColumnPicker() {
+      _grid.onColumnsReordered.subscribe(updateColumnOrder);
+      _options = $.extend({}, _defaults, _options);
 
-          var $content = $("<span class='slick-gridmenu-content'></span>")
-            .text(item.title)
-            .appendTo($li);
-        }
+      // user could pass a title on top of the columns list
+      if (_options.gridMenu && _options.gridMenu.columnTitle) {
+        $columnTitleElm = $('<div class="title"/>').append(_options.gridMenu.columnTitle);
+        $columnTitleElm.appendTo($menu);
       }
 
-      /** Build the column picker, the code comes almost untouched from the file "slick.columnpicker.js" */
-      function populateColumnPicker() {
-        _grid.onColumnsReordered.subscribe(updateColumnOrder);
-        _options = $.extend({}, _defaults, _options);
+      $menu.on("click", updateColumn);
+      $list = $('<span class="slick-gridmenu-list" />');
+    }
 
-        // user could pass a title on top of the columns list
-        if(_options.gridMenu && _options.gridMenu.columnTitle) {
-          var $title = $('<div class="title"/>').append(_options.gridMenu.columnTitle);
-          $title.appendTo($menu);
-        }
+    function showGridMenu(e) {
+      e.preventDefault();
+      $list.empty();
 
-        $menu.on("click", updateColumn);
-        $list = $('<span class="slick-gridmenu-list" />');
-      }
+      updateColumnOrder();
+      columnCheckboxes = [];
 
-      function showGridMenu(e) {
-        e.preventDefault();
-        $list.empty();
-
-        updateColumnOrder();
-        columnCheckboxes = [];
-
-        // notify of the onBeforeMenuShow only works when it's a jQuery event (as per slick.core code)
-        // this mean that we cannot notify when the grid menu is attach to a button event
-        if(typeof e.isPropagationStopped === "function") {
-          if (_self.onBeforeMenuShow.notify({
-            "grid": _grid,
-            "menu": $menu
-          }, e, _self) == false) {
-            return;
-          }
+      // notify of the onBeforeMenuShow only works when it's a jQuery event (as per slick.core code)
+      // this mean that we cannot notify when the grid menu is attach to a button event
+      if (typeof e.isPropagationStopped === "function") {
+        if (_self.onBeforeMenuShow.notify({
+          "grid": _grid,
+          "menu": $menu
+        }, e, _self) == false) {
+          return;
         }
+      }
 
-        var $li, $input;
-        for (var i = 0; i < columns.length; i++) {
-          $li = $("<li />").appendTo($list);
-          $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
-          columnCheckboxes.push($input);
+      var $li, $input, excludeCssClass;
+      for (var i = 0; i < columns.length; i++) {
+        excludeCssClass = columns[i].excludeFromGridMenu ? "hidden" : "";
+        $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
 
-          if (_grid.getColumnIndex(columns[i].id) != null) {
-            $input.attr("checked", "checked");
-          }
+        $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
+        columnCheckboxes.push($input);
 
-          $("<label />")
-              .html(columns[i].name)
-              .prepend($input)
-              .appendTo($li);
+        if (_grid.getColumnIndex(columns[i].id) != null) {
+          $input.attr("checked", "checked");
         }
 
-        if (_options.gridMenu && (!_options.gridMenu.hideForceFitButton || !_options.gridMenu.hideSyncResizeButton)) {
-          $("<hr/>").appendTo($list);
-        }
+        $("<label />")
+          .html(columns[i].name)
+          .prepend($input)
+          .appendTo($li);
+      }
 
-        if (!(_options.gridMenu && _options.gridMenu.hideForceFitButton)) {
-          var forceFitTitle = (_options.gridMenu && _options.gridMenu.forceFitTitle) || _defaults.forceFitTitle;
-          $li = $("<li />").appendTo($list);
-          $input = $("<input type='checkbox' />").data("option", "autoresize");
-          $("<label />")
-              .text(forceFitTitle)
-              .prepend($input)
-              .appendTo($li);
-          if (_grid.getOptions().forceFitColumns) {
-            $input.attr("checked", "checked");
-          }
+      if (_options.gridMenu && (!_options.gridMenu.hideForceFitButton || !_options.gridMenu.hideSyncResizeButton)) {
+        $("<hr/>").appendTo($list);
+      }
+
+      if (!(_options.gridMenu && _options.gridMenu.hideForceFitButton)) {
+        var forceFitTitle = (_options.gridMenu && _options.gridMenu.forceFitTitle) || _defaults.forceFitTitle;
+        $li = $("<li />").appendTo($list);
+        $input = $("<input type='checkbox' />").data("option", "autoresize");
+        $("<label />")
+          .text(forceFitTitle)
+          .prepend($input)
+          .appendTo($li);
+        if (_grid.getOptions().forceFitColumns) {
+          $input.attr("checked", "checked");
         }
+      }
 
-        if (!(_options.gridMenu && _options.gridMenu.hideSyncResizeButton)) {
-          var syncResizeTitle = (_options.gridMenu && _options.gridMenu.syncResizeTitle) || _defaults.syncResizeTitle;
-          $li = $("<li />").appendTo($list);
-          $input = $("<input type='checkbox' />").data("option", "syncresize");
-          $("<label />")
-              .text(syncResizeTitle)
-              .prepend($input)
-              .appendTo($li);
-          if (_grid.getOptions().syncColumnCellResize) {
-            $input.attr("checked", "checked");
-          }
+      if (!(_options.gridMenu && _options.gridMenu.hideSyncResizeButton)) {
+        var syncResizeTitle = (_options.gridMenu && _options.gridMenu.syncResizeTitle) || _defaults.syncResizeTitle;
+        $li = $("<li />").appendTo($list);
+        $input = $("<input type='checkbox' />").data("option", "syncresize");
+        $("<label />")
+          .text(syncResizeTitle)
+          .prepend($input)
+          .appendTo($li);
+
+        if (_grid.getOptions().syncColumnCellResize) {
+          $input.attr("checked", "checked");
         }
+      }
 
-        var gridMenuWidth = $menu.width();
+      $menu
+        .css("top", e.pageY + 10)
+        .css("left", e.pageX - $menu.width())
+        .css("max-height", $(window).height() - e.pageY - 10)
+        .fadeIn(_options.fadeSpeed);
 
-        $menu
-            .css("top", e.pageY + 10)
-            .css("left", e.pageX - $menu.width())
-            .css("max-height", $(window).height() - e.pageY -10)
-            .fadeIn(_options.fadeSpeed);
+      $list.appendTo($menu);
+      _isMenuOpen = true;
+    }
 
-        $list.appendTo($menu);
-        _isMenuOpen = true;
+    function handleBodyMouseDown(e) {
+      if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target) && _isMenuOpen) || e.target.className == "close") {
+        hideMenu(e);
       }
+    }
 
-      function handleBodyMouseDown(e) {
-        if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target) && _isMenuOpen) || e.target.className == "close") {
-          hideMenu(e);
-        }
+    function handleMenuItemClick(e) {
+      var command = $(this).data("command");
+      var item = $(this).data("item");
+
+      if (item.disabled || item.divider) {
+        return;
+      }
+
+      // does the user want to leave open the Grid Menu after executing a command?
+      var leaveOpen = (_options.gridMenu && _options.gridMenu.leaveOpen) ? true : false;
+      if (!leaveOpen) {
+        hideMenu(e);
       }
 
-      function handleMenuItemClick(e) {
-        var command = $(this).data("command");
-        var item = $(this).data("item");
+      if (command != null && command != '') {
+        _self.onCommand.notify({
+          "grid": _grid,
+          "command": command,
+          "item": item
+        }, e, _self);
+      }
 
-        if (item.disabled || item.divider) {
-          return;
-        }
+      // Stop propagation so that it doesn't register as a header click event.
+      e.preventDefault();
+      e.stopPropagation();
+    }
 
-        // does the user want to leave open the Grid Menu after executing a command?
-        var leaveOpen = (_options.gridMenu && _options.gridMenu.leaveOpen) ? true : false;
-        if(!leaveOpen) {
-          hideMenu(e);
-        }
+    function hideMenu(e) {
+      if ($menu) {
+        $menu.hide(_options.fadeSpeed);
+        _isMenuOpen = false;
 
-        if (command != null && command != '') {
-          _self.onCommand.notify({
-              "grid": _grid,
-              "command": command,
-              "item": item
-            }, e, _self);
+        if (_self.onMenuClose.notify({
+          "grid": _grid,
+          "menu": $menu
+        }, e, _self) == false) {
+          return;
         }
-
-        // Stop propagation so that it doesn't register as a header click event.
-        e.preventDefault();
-        e.stopPropagation();
       }
+    }
 
-      function hideMenu(e) {
-        if ($menu) {
-          $menu.hide(_options.fadeSpeed);
-          _isMenuOpen = false;
+    /** Update the Titles of each sections (command, customTitle, ...) */
+    function updateAllTitles(gridMenuOptions) {
+      if ($customTitleElm && $customTitleElm.text) {
+        $customTitleElm.text(gridMenuOptions.customTitle);
+      }
+      if ($columnTitleElm && $columnTitleElm.text) {
+        $columnTitleElm.text(gridMenuOptions.columnTitle);
+      }
+    }
 
-          if (_self.onMenuClose.notify({
-            "grid": _grid,
-            "menu": $menu
-          }, e, _self) == false) {
-            return;
-          }
+    function updateColumnOrder() {
+      // Because columns can be reordered, we have to update the `columns`
+      // to reflect the new order, however we can't just take `grid.getColumns()`,
+      // as it does not include columns currently hidden by the picker.
+      // We create a new `columns` structure by leaving currently-hidden
+      // columns in their original ordinal position and interleaving the results
+      // of the current column sort.
+      var current = _grid.getColumns().slice(0);
+      var ordered = new Array(columns.length);
+      for (var i = 0; i < ordered.length; i++) {
+        if (_grid.getColumnIndex(columns[i].id) === undefined) {
+          // If the column doesn't return a value from getColumnIndex,
+          // it is hidden. Leave it in this position.
+          ordered[i] = columns[i];
+        } else {
+          // Otherwise, grab the next visible column.
+          ordered[i] = current.shift();
         }
       }
+      columns = ordered;
+    }
 
-      function updateColumnOrder() {
-        // Because columns can be reordered, we have to update the `columns`
-        // to reflect the new order, however we can't just take `grid.getColumns()`,
-        // as it does not include columns currently hidden by the picker.
-        // We create a new `columns` structure by leaving currently-hidden
-        // columns in their original ordinal position and interleaving the results
-        // of the current column sort.
-        var current = _grid.getColumns().slice(0);
-        var ordered = new Array(columns.length);
-        for (var i = 0; i < ordered.length; i++) {
-          if ( _grid.getColumnIndex(columns[i].id) === undefined ) {
-            // If the column doesn't return a value from getColumnIndex,
-            // it is hidden. Leave it in this position.
-            ordered[i] = columns[i];
-          } else {
-            // Otherwise, grab the next visible column.
-            ordered[i] = current.shift();
-          }
+    function updateColumn(e) {
+      if ($(e.target).data("option") == "autoresize") {
+        if (e.target.checked) {
+          _grid.setOptions({ forceFitColumns: true });
+          _grid.autosizeColumns();
+        } else {
+          _grid.setOptions({ forceFitColumns: false });
         }
-        columns = ordered;
+        return;
       }
 
-      function updateColumn(e) {
-        if ($(e.target).data("option") == "autoresize") {
-          if (e.target.checked) {
-            _grid.setOptions({forceFitColumns:true});
-            _grid.autosizeColumns();
-          } else {
-            _grid.setOptions({forceFitColumns:false});
-          }
-          return;
+      if ($(e.target).data("option") == "syncresize") {
+        if (e.target.checked) {
+          _grid.setOptions({ syncColumnCellResize: true });
+        } else {
+          _grid.setOptions({ syncColumnCellResize: false });
         }
+        return;
+      }
 
-        if ($(e.target).data("option") == "syncresize") {
-          if (e.target.checked) {
-            _grid.setOptions({syncColumnCellResize:true});
-          } else {
-            _grid.setOptions({syncColumnCellResize:false});
+      if ($(e.target).is(":checkbox")) {
+        var visibleColumns = [];
+        $.each(columnCheckboxes, function (i, e) {
+          if ($(this).is(":checked")) {
+            visibleColumns.push(columns[i]);
           }
+        });
+
+        if (!visibleColumns.length) {
+          $(e.target).attr("checked", "checked");
           return;
         }
 
-        if ($(e.target).is(":checkbox")) {
-          var visibleColumns = [];
-          $.each(columnCheckboxes, function (i, e) {
-            if ($(this).is(":checked")) {
-              visibleColumns.push(columns[i]);
-            }
-          });
-
-          if (!visibleColumns.length) {
-            $(e.target).attr("checked", "checked");
-            return;
-          }
-
-          _grid.setColumns(visibleColumns);
-          _self.onColumnsChanged.notify({
-              "grid": _grid,
-              "columns": visibleColumns
-            }, e, _self);
-        }
+        _grid.setColumns(visibleColumns);
+        _self.onColumnsChanged.notify({
+          "grid": _grid,
+          "columns": visibleColumns
+        }, e, _self);
       }
+    }
 
-      init(_grid);
-
-      function getAllColumns() {
-        return columns;
-      }
+    init(_grid);
 
-      $.extend(this, {
-        "init": init,
-        "getAllColumns": getAllColumns,
-        "destroy": destroy,
-        "showGridMenu": showGridMenu,
-        "onBeforeMenuShow": new Slick.Event(),
-        "onMenuClose": new Slick.Event(),
-        "onCommand": new Slick.Event(),
-        "onColumnsChanged": new Slick.Event()
-      });
+    function getAllColumns() {
+      return columns;
     }
-  })(jQuery);
+
+    $.extend(this, {
+      "init": init,
+      "getAllColumns": getAllColumns,
+      "destroy": destroy,
+      "showGridMenu": showGridMenu,
+      "updateAllTitles": updateAllTitles,
+      "onBeforeMenuShow": new Slick.Event(),
+      "onMenuClose": new Slick.Event(),
+      "onCommand": new Slick.Event(),
+      "onColumnsChanged": new Slick.Event()
+    });
+  }
+})(jQuery);