Changes to mleibman since fork

.gitignore

@@ -1,2 +1,3 @@
 .gitk*
-.idea/*
+.idea/*
+.DS_Store

README.md

@@ -0,0 +1,27 @@
+# Welcome to SlickGrid
+
+Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki).
+
+
+**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.**
+
+**UPDATE:  This repo hasn't been updated in a while. https://github.com/6pac/SlickGrid/wiki seems to be the most active fork at the moment.**
+
+## SlickGrid is an advanced JavaScript grid/spreadsheet component
+
+Some highlights:
+
+* Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
+* Extremely fast rendering speed
+* Supports jQuery UI Themes
+* Background post-rendering for richer cells
+* Configurable & customizable
+* Full keyboard navigation
+* Column resize/reorder/show/hide
+* Column autosizing & force-fit
+* Pluggable cell formatters & editors
+* Support for editing and creating new rows.
+* Grouping, filtering, custom aggregators, and more!
+* Advanced detached & multi-field editors with undo/redo support.
+* “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.
+* Support for [millions of rows](http://stackoverflow.com/a/2569488/1269037)

controls/slick.columnpicker.css

@@ -4,6 +4,7 @@
   padding: 6px;
   -moz-box-shadow: 2px 2px 2px silver;
   -webkit-box-shadow: 2px 2px 2px silver;
+  box-shadow: 2px 2px 2px silver;
   min-width: 100px;
   cursor: default;
 }
@@ -27,4 +28,4 @@
 
 .slick-columnpicker li a:hover {
   background: white;
-}
+}

controls/slick.columnpicker.js

@@ -9,6 +9,7 @@
 
     function init() {
       grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
+      grid.onColumnsReordered.subscribe(updateColumnOrder);
       options = $.extend({}, defaults, options);
 
       $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
@@ -20,9 +21,16 @@
 
     }
 
+    function destroy() {
+      grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
+      grid.onColumnsReordered.unsubscribe(updateColumnOrder);
+      $menu.remove();
+    }
+
     function handleHeaderContextMenu(e, args) {
       e.preventDefault();
       $menu.empty();
+      updateColumnOrder();
       columnCheckboxes = [];
 
       var $li, $input;
@@ -68,6 +76,28 @@
           .fadeIn(options.fadeSpeed);
     }
 
+    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 updateColumn(e) {
       if ($(e.target).data("option") == "autoresize") {
         if (e.target.checked) {
@@ -105,7 +135,16 @@
       }
     }
 
+    function getAllColumns() {
+      return columns;
+    }
+
     init();
+
+    return {
+      "getAllColumns": getAllColumns,
+      "destroy": destroy
+    };
   }
 
   // Slick.Controls.ColumnPicker

controls/slick.pager.js

@@ -133,6 +133,13 @@
       }
 
       if (pagingInfo.pageSize == 0) {
+        var totalRowsCount = dataView.getItems().length;
+        var visibleRowsCount = pagingInfo.totalRows;
+        if (visibleRowsCount < totalRowsCount) {
+          $status.text("Showing " + visibleRowsCount + " of " + totalRowsCount + " rows");
+        } else {
+          $status.text("Showing all " + totalRowsCount + " rows");
+        }
         $status.text("Showing all " + pagingInfo.totalRows + " rows");
       } else {
         $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages);

examples/example-autotooltips.html

@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid plugin example: AutoTooltips</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <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"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:300px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>AutoTooltips plugin</li>
+      </ul>
+      <h2>Instructions:</h2>
+      <p>Resize the columns until see ellipsis in column or header.  Hover over cell to see tooltip.</p>
+      <h2>Usage:</h2>
+      <pre style="background-color: white; font-size: 110%; border-radius: 5px; padding: 20px; ">plugin = new Slick.AutoTooltips(pluginOptions);
+grid.registerPlugin(plugin);
+grid.render();</pre>
+
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-autotooltips.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </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 src="../plugins/slick.autotooltips.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {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 = {
+    enableCellNavigation: true,
+    enableColumnReorder: 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)
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
+    grid.render();
+  })
+</script>
+</body>
+</html>

examples/example-checkbox-row-select.html

@@ -5,6 +5,7 @@
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
   <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"/>
+  <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
   <style>
     .slick-cell-checkboxsel {
       background: #f0f0f0;
@@ -24,14 +25,19 @@ <h2>Demonstrates:</h2>
     <ul>
       <li>Checkbox row select column</li>
     </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-checkbox-row-select.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+
   </div>
 </div>
 
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.checkboxselectcolumn.js"></script>
@@ -41,6 +47,7 @@ <h2>Demonstrates:</h2>
 <script src="../plugins/slick.cellcopymanager.js"></script>
 <script src="../plugins/slick.cellselectionmodel.js"></script>
 <script src="../plugins/slick.rowselectionmodel.js"></script>
+<script src="../controls/slick.columnpicker.js"></script>
 <script src="../slick.formatters.js"></script>
 <script src="../slick.editors.js"></script>
 <script src="../slick.grid.js"></script>
@@ -81,6 +88,8 @@ <h2>Demonstrates:</h2>
     grid = new Slick.Grid("#myGrid", data, columns, options);
     grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
     grid.registerPlugin(checkboxSelector);
+
+    var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
   })
 </script>
 </body>

examples/example-colspan.html

@@ -16,12 +16,16 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>column span</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-colspan.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.cellrangedecorator.js"></script>
@@ -47,7 +51,7 @@ <h2>Demonstrates:</h2>
 
   $(function () {
     var data = [];
-    for (var i = 0; i < 10; i++) {
+    for (var i = 0; i < 500; i++) {
       data[i] = {
         title: "Task " + i,
         duration: "5 days",

examples/example-composite-editor-item-details.html

@@ -70,6 +70,11 @@ <h2>Demonstrates:</h2>
 
     <h2>Options:</h2>
     <button onclick="openDetails()">Open Item Edit for active row</button>
+
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-composite-editor-item-details.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -95,7 +100,7 @@ <h2>Options:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
 
 <script src="../slick.core.js"></script>

examples/example-custom-column-value-extractor.html

@@ -18,12 +18,16 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-custom-column-value-extractor.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.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>

examples/example-explicit-initialization.html

@@ -25,12 +25,16 @@ <h2>Demonstrates:</h2>
           This example demonstrates creating a SlickGrid inside a detached element and calling <b>init()</b> explicitly
           when the element is added to the DOM.
       </p>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-explicit-initialization.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.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>