6pac · 6pac · Dec 23, 2018 · May 15, 2018 · May 15, 2018 · May 17, 2018
diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
@@ -93,7 +93,7 @@
       $list.empty();
       updateColumnOrder();
       columnCheckboxes = [];
-      
+
       var $li, $input;
       var columnLabel;
       for (var i = 0; i < columns.length; i++) {

diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
@@ -94,6 +94,7 @@
 
     function SlickGridMenu(columns, grid, options) {
       var _grid = grid;
+      var _gridOptions;
       var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
       var _isMenuOpen = false;
       var _options = options;
@@ -113,8 +114,14 @@
       };
 
       function init(grid) {
+        _gridOptions = grid.getOptions();
         var gridMenuWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
-        var $header = $('.' + _gridUid + ' .slick-header');
+        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

diff --git a/examples/example-draggable-grouping.html b/examples/example-draggable-grouping.html
@@ -247,10 +247,10 @@ <h2>View Source:</h2>
 function toggleDraggableGrouping() {
    clearGroupings();
   if ( draggableEnabled == true ) {
-     $(".slick-preheader-panel").hide();
-     draggableEnabled = false;
+    grid.setPreHeaderPanelVisibility(false);
+    draggableEnabled = false;
   } else {
-    $(".slick-preheader-panel").show();
+    grid.setPreHeaderPanelVisibility(true);
     draggableEnabled = true;
   }
 }

diff --git a/examples/example-explicit-initialization.html b/examples/example-explicit-initialization.html
@@ -71,7 +71,7 @@ <h2>View Source:</h2>
     }
 
     // create a detached container element
-    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
+    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;position:relative;'></div>");
     grid = new Slick.Grid(myGrid, data, columns, options);
 
 

diff --git a/examples/example-frozen-columns-and-rows-spreadsheet.html b/examples/example-frozen-columns-and-rows-spreadsheet.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
+  <title>SlickGrid Example: Spreadsheet with Frozen Rows and Columns</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+    .slick-cell.copied {
+      background: blue;
+      background: rgba(0, 0, 255, 0.2);
+      -webkit-transition: 0.5s background;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Virtual scrolling on both rows and columns.</li>
+      <li>Select a range of cells with a mouse</li>
+      <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li>
+      <li>Use Esc to cancel a copy and paste operation</li>
+      <li>Edit the cell and select a cell range to paste the range</li>
+    </ul>
+  </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.3.0.js"></script>
+<script src="../lib/jquery.mousewheel.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.autotooltips.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellcopymanager.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  var options = {
+    editable: true,
+    enableAddRow: true,
+    enableCellNavigation: true,
+    asyncEditorLoading: false,
+    autoEdit: false, frozenColumn: 3, frozenRow: 7
+  };
+
+  var columns = [
+    {
+      id: "selector",
+      name: "",
+      field: "num",
+      width: 30
+    }
+  ];
+
+  for (var i = 0; i < 100; i++) {
+    columns.push({
+      id: i,
+      //name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
+      //      String.fromCharCode("A".charCodeAt(0) + (i % 26)),
+      name: i,
+      field: i,
+      width: 60,
+      editor: FormulaEditor
+    });
+  }
+
+  /***
+   * A proof-of-concept cell editor with Excel-like range selection and insertion.
+   */
+  function FormulaEditor(args) {
+    var _self = this;
+    var _editor = new Slick.Editors.Text(args);
+    var _selector;
+
+    $.extend(this, _editor);
+
+    function init() {
+      // register a plugin to select a range and append it to the textbox
+      // since events are fired in reverse order (most recently added are executed first),
+      // this will override other plugins like moverows or selection model and will
+      // not require the grid to not be in the edit mode
+      _selector = new Slick.CellRangeSelector();
+      _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected);
+      args.grid.registerPlugin(_selector);
+    }
+
+    this.destroy = function () {
+      _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected);
+      grid.unregisterPlugin(_selector);
+      _editor.destroy();
+    };
+
+    this.handleCellRangeSelected = function (e, args) {
+      _editor.setValue(
+          _editor.getValue() +
+          grid.getColumns()[args.range.fromCell].name +
+          args.range.fromRow +
+          ":" +
+          grid.getColumns()[args.range.toCell].name +
+          args.range.toRow
+      );
+    };
+
+
+    init();
+  }
+
+
+  $(function () {
+    for (var i = 0; i < 100; i++) {
+      var d = (data[i] = {});
+      d["num"] = i;
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    grid.setSelectionModel(new Slick.CellSelectionModel());
+    grid.registerPlugin(new Slick.AutoTooltips());
+
+    // set keyboard focus on the grid
+    grid.getCanvasNode().focus();
+
+    var copyManager = new Slick.CellCopyManager();
+    grid.registerPlugin(copyManager);
+
+    copyManager.onPasteCells.subscribe(function (e, args) {
+      if (args.from.length !== 1 || args.to.length !== 1) {
+        throw "This implementation only supports single range copy and paste operations";
+      }
+
+      var from = args.from[0];
+      var to = args.to[0];
+      var val;
+      for (var i = 0; i <= from.toRow - from.fromRow; i++) {
+        for (var j = 0; j <= from.toCell - from.fromCell; j++) {
+          if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
+            val = data[from.fromRow + i][columns[from.fromCell + j].field];
+            data[to.fromRow + i][columns[to.fromCell + j].field] = val;
+            grid.invalidateRow(to.fromRow + i);
+          }
+        }
+      }
+      grid.render();
+    });
+
+    grid.onAddNewRow.subscribe(function (e, args) {
+      var item = args.item;
+      var column = args.column;
+      grid.invalidateRow(data.length);
+      data.push(item);
+      grid.updateRowCount();
+      grid.render();
+    });
+  })
+</script>
+</body>
+</html>