Add on render callback

.gitignore

@@ -1,3 +1,10 @@
 .gitk*
 .idea/*
 .DS_Store
+
+# node stuff
+node_modules/
+npm-debug.log
+
+# sass stuff
+.sass-cache/

README.md

@@ -1,11 +1,65 @@
-# Welcome to SlickGrid
+# About the column pinning effort
 
-Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki).
+This fork adds pinned columns to slickgrid. There was a fair amount of code rewrite involved. Work in progress.
+
+## [Pinned Column Examples](http://git.simple.gy/SlickGrid/)
+
+## Renaming
+
+To support pinned columns, we slice up the grid regions, and try to be very clear and consistent about the naming.
+This is because having a left and right region for every content area makes a flat list of naming conventions multiply quickly.
+I also was uncomfortable with the proliferation of names like `header`, `headerScroller`, and `headerRow`.
+
+Two big changes:
+1. UI components are labeled top to bottom by what control they are.
+2. `headerRow` renamed to `subHeader`. The old name was confusing. TODO: This means the name of related options has changed, too.
+
+Canvases always represent content size, viewports always represent scrollable regions.
+
+Every element has side `[0]` and side `[1]`, for left and right.
+
+```
+Visual Grid Components
+                        [0]       [1]
+                      ....................
+topViewport           .     .            .     // The scrolling region
+  topCanvas           .     .            .     // The full size of content (both off and on screen)
+    header            .     .            .     // The column headers
+    subHeader         .     .            .     // Optional row of cells below the column headers
+                      ....................
+contentViewportWrap   .     .            .
+contentViewport       .     .            .     // The scrolling region for the grid rows
+  contentCanvas       .     .            .     // Full size of row content, both width and height
+                      .     .            .
+                      .     .            .
+                      .     .            .
+                      .     .            .
+                      .     .            .
+                      ....................
+```
 
+## Other Changes:
 
-**UPDATE:  March 5th, 2014 - I have too many things going on in my life right now to really give SlickGrid support and development the time and attention it deserves.  I am not stopping it, but I will most likely be unresponsive for some time.  Sorry.**
+**Adds some methods** that make it more performant to do auto column resizing and exposes some methods that make it easier to work with multiple grid instances and pinned columns.
+
+* `grid.updateColumnWidths(columnDefinitions)`
+  * Using this method improves the performance of changing the width of one or more grid columns by a lot. The existing API only allows for a whole grid redraw, which can be very slow. Pull request with notes [here](https://github.com/mleibman/SlickGrid/pull/897). Use cases for fast column size adjustment may be: auto-sizing columns to fit content, responsive sizing cells to fill the screen, and similar.
+* `grid.getId()` lets you get the uid of the grid instance
+* Triggers existing event `onColumnsResized` when you change the column widths
+* Triggers a new event `onColumnsChanged` when you set the columns
+* Exposes the existing method `grid.setupColumnResize`, which allows you to re-enable column resizing if you're manually screwing around with the headers.
+* Some new options on `setColumns` and `resizeCanvas` let you prevent some of the expensive calculations, useful if you're doing them yourself externally.
+
+**Adds [antiscroll](https://github.com/learnboost/antiscroll) compatability** to enable a uniform, OSX-style scrolling experience across browsers. Enable antiscroll by including the antiscroll library on your page, and passing the `useAntiscroll: true` option to your SlickGrid instance. By default we don't show scrollbars until the user begins scrolling (to mimic the way OSX does it); to change that behavior, you can set the `showScrollbarsOnHover` option.
+
+
+## (Original Documentation) Welcome to SlickGrid
+
+**UPDATE From Mr. Leibman:  March 5th, 2014 - I have too many things going on in my life right now to really give SlickGrid support and development the time and attention it deserves.  I am not stopping it, but I will most likely be unresponsive for some time.  Sorry.**
+
+Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki).
 
-## SlickGrid is an advanced JavaScript grid/spreadsheet component
+### SlickGrid is an advanced JavaScript grid/spreadsheet component
 
 Some highlights:
 

bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "slickgrid",
+  "version": "2.3.4",
+  "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid",
+  "authors": [
+    "Michael Leibman",
+    "Eric Miller"
+  ],
+  "description": "Slickgrid with pinning, more customizability, and faster column sizing.",
+  "moduleType": [
+    "globals"
+  ],
+  "keywords": [
+    "slickgrid",
+    "pinned",
+    "performance",
+    "autosize",
+    "column",
+    "size"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "antiscroll": "bcherny/antiscroll"
+  }
+}

examples/example-header-row.html

@@ -60,12 +60,14 @@ <h2>View Source:</h2>
     enableCellNavigation: true,
     showHeaderRow: true,
     headerRowHeight: 30,
-    explicitInitialization: true
+    explicitInitialization: true,
+    showSubHeader: true,
+//    subHeaderRenderer: function(col){ return $('<div><input type="text"/></div>') }
   };
   var columns = [];
   var columnFilters = {};
 
-  for (var i = 0; i < 10; i++) {
+  for (var i = 0; i < 20; i++) {
     columns.push({
       id: i,
       name: String.fromCharCode("A".charCodeAt(0) + i),
@@ -111,15 +113,15 @@ <h2>View Source:</h2>
     });
 
 
-    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
+    $(grid.getSubHeader()).delegate(":input", "change keyup", function (e) {
       var columnId = $(this).data("columnId");
       if (columnId != null) {
         columnFilters[columnId] = $.trim($(this).val());
         dataView.refresh();
       }
     });
 
-    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
+    grid.onSubHeaderCellRendered.subscribe(function(e, args) {
         $(args.node).empty();
         $("<input type='text'>")
            .data("columnId", args.column.id)

examples/example-spreadsheet.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
   <style>
-    .slick-cell.copied {
+    .slickGrid .cell.copied {
       background: blue;
       background: rgba(0, 0, 255, 0.2);
       -webkit-transition: 0.5s background;

examples/example1-simple.html

@@ -18,10 +18,10 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>basic grid with minimal configuration</li>
       </ul>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
+      <h2>View Source:</h2>
+      <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
     </td>
   </tr>
 </table>

examples/example8-alternative-display.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
   <style>
-    .slick-cell {
+    .cell {
       background: white !important;
       border-color: transparent !important;
       line-height: 19px !important;
@@ -18,8 +18,8 @@
       margin-right: 60px;
     }
 
-    .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner,
-    .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner {
+    .row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner,
+    .row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner {
       margin-left: 60px;
       margin-right: 0;
     }

examples/pincushion1-simple.html

@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>Pinned Columns - Pincushion Example 1</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:500px;height:500px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>Simplest case of pinned columns</li>
+      </ul>
+      <button onclick="unpin()">Clear Pin</button><br/><br/>
+      <input id="PinnedColumn" type="number" max="5" min="0" value="0" style="width:25px;"/> <button onclick="pin()">Pin</button><br/>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+
+  function unpin () {
+    grid.setOptions({ pinnedColumn: null }); // `undefined` also works
+  }
+
+  function pin () {
+    var val = document.getElementById('PinnedColumn').value;
+    val = parseInt(val);
+    if (isNaN( val )){ return; }
+    grid.setOptions({ pinnedColumn: val });
+  }
+
+  var grid;
+  var columns = [
+    { id: "title", name: "Title", field: "title"},
+    { id: "%", name: "% Complete", field: "percentComplete"},
+    { id: "duration", name: "Duration", field: "duration"},
+    { id: "start", name: "Start", field: "start"},
+    { id: "finish", name: "Finish", field: "finish"},
+    { id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
+    { id: "duration", name: "Duration", field: "duration"},
+    { id: "%", name: "% Complete", field: "percentComplete"},
+    { id: "start", name: "Start", field: "start"},
+    { id: "finish", name: "Finish", field: "finish"},
+    { id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
+    { id: "duration", name: "Duration", field: "duration"},
+    { id: "%", name: "% Complete", field: "percentComplete"},
+    { id: "start", name: "Start", field: "start"},
+    { id: "finish", name: "Finish", field: "finish"},
+    { id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
+    { id: "duration", name: "Duration", field: "duration"},
+    { id: "%", name: "% Complete", field: "percentComplete"},
+    { id: "start", name: "Start", field: "start"},
+    { id: "finish", name: "Finish", field: "finish"},
+    { id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    pinnedColumn: 0,
+    debug: false
+  };
+
+
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    window._grid = grid = new Slick.Grid("#myGrid", data, columns, options);
+
+
+
+  })
+</script>
+</body>
+</html>