Merge branch 'master' of github.com:6pac/SlickGrid

Author: 6pac

controls/slick.columnpicker.js

@@ -1,3 +1,27 @@
+  /***
+   * 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
+   *      forceFitTitle: "Force fit columns",     // default to "Force fit columns"
+   *      syncResizeTitle: "Synchronous resize",  // default to "Synchronous resize"
+   *    }
+   *  };
+   *
+   * @class Slick.Controls.ColumnPicker
+   * @constructor
+   */
+
 'use strict';
 
 (function ($) {
@@ -7,7 +31,11 @@
     var columnCheckboxes;
 
     var defaults = {
-      fadeSpeed: 250
+      fadeSpeed: 250,
+
+      // the last 2 checkboxes titles
+      forceFitTitle: "Force fit columns",
+      syncResizeTitle: "Synchronous resize"
     };
 
     function init() {
@@ -19,8 +47,9 @@
       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);
 
       // user could pass a title on top of the columns list
-      if(options.columnPickerTitle) {
-        var $title = $("<div class='title'/>").append(options.columnPickerTitle);
+      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);
       }
 
@@ -70,21 +99,23 @@
             .appendTo($li);
       }
 
+      var forceFitTitle = (options.columnPicker && options.columnPicker.forceFitTitle) || defaults.forceFitTitle;
       $("<hr/>").appendTo($list);
       $li = $("<li />").appendTo($list);
       $input = $("<input type='checkbox' />").data("option", "autoresize");
       $("<label />")
-          .text("Force fit columns")
+          .text(forceFitTitle)
           .prepend($input)
           .appendTo($li);
       if (grid.getOptions().forceFitColumns) {
         $input.attr("checked", "checked");
       }
 
+      var syncResizeTitle = (options.columnPicker && options.columnPicker.syncResizeTitle) || defaults.syncResizeTitle;
       $li = $("<li />").appendTo($list);
       $input = $("<input type='checkbox' />").data("option", "syncresize");
       $("<label />")
-          .text("Synchronous resize")
+          .text(syncResizeTitle)
           .prepend($input)
           .appendTo($li);
       if (grid.getOptions().syncColumnCellResize) {

controls/slick.gridmenu.js

@@ -13,13 +13,18 @@
    *  var options = {
    *    enableCellNavigation: true,
    *    gridMenu: {
-   *      customTitle: "Custom Menus",
-   *      columnTitle: "Columns",
-   *      iconImage: "../images/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: true,              // true by default
+   *      customTitle: "Custom Menus",                // default to empty string
+   *      columnTitle: "Columns",                     // default to empty string
+   *      iconImage: "../images/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: true,                // true by default
+   *
+   *      // the last 2 checkboxes titles
+   *      forceFitTitle: "Force fit columns",         // default to "Force fit columns"
+   *      syncResizeTitle: "Synchronous resize",      // default to "Synchronous resize"
+   *
    *      customItems: [
    *        {
    *          // custom menu item options
@@ -95,8 +100,10 @@
       var columnCheckboxes;
       var _defaults = {
         fadeSpeed: 250,
+        forceFitTitle: "Force fit columns",
         menuWidth: 18,
-        resizeOnShowHeaderRow: false
+        resizeOnShowHeaderRow: false,
+        syncResizeTitle: "Synchronous resize"
       };
 
       function init(grid) {
@@ -241,21 +248,23 @@
               .appendTo($li);
         }
 
+        var forceFitTitle = (_options.gridMenu && _options.gridMenu.forceFitTitle) || _defaults.forceFitTitle;
         $("<hr/>").appendTo($list);
         $li = $("<li />").appendTo($list);
         $input = $("<input type='checkbox' />").data("option", "autoresize");
         $("<label />")
-            .text("Force fit columns")
+            .text(forceFitTitle)
             .prepend($input)
             .appendTo($li);
         if (_grid.getOptions().forceFitColumns) {
           $input.attr("checked", "checked");
         }
 
+        var syncResizeTitle = (_options.gridMenu && _options.gridMenu.syncResizeTitle) || _defaults.syncResizeTitle;
         $li = $("<li />").appendTo($list);
         $input = $("<input type='checkbox' />").data("option", "syncresize");
         $("<label />")
-            .text("Synchronous resize")
+            .text(syncResizeTitle)
             .prepend($input)
             .appendTo($li);
         if (_grid.getOptions().syncColumnCellResize) {

examples/example4-model.html

@@ -125,7 +125,11 @@ <h2>View Source:</h2>
 ];
 
 var options = {
-  columnPickerTitle: "Columns",
+  columnPicker: {
+    columnTitle: "Columns",
+    forceFitTitle: "Force fit columns",
+    syncResizeTitle: "Synchronous resize",
+  },
   editable: true,
   enableAddRow: true,
   enableCellNavigation: true,