From ce6fb91b99fad0b3b1ad397cc9d254d0778dc024 Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 6 Mar 2014 11:03:02 -0800 Subject: [PATCH 001/124] Setting up the grid for every test makes them idempotent, which is desirable because qUnit does not guarantee order. --- tests/grid/grid.js | 55 ++++++++++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/tests/grid/grid.js b/tests/grid/grid.js index 844113750..fd1409b48 100755 --- a/tests/grid/grid.js +++ b/tests/grid/grid.js @@ -1,7 +1,7 @@ (function ($) { var grid; - var el, offsetBefore, offsetAfter, dragged; + var el, offsetBefore, offsetAfter, dragged, cols, col, data; var drag = function(handle, dx, dy) { offsetBefore = el.offset(); @@ -20,31 +20,36 @@ same(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg); } - var ROWS = 500, COLS = 10; - var data = [], row; - for (var i = 0; i < ROWS; i++) { - row = { id: "id_" + i }; - for (var j = 0; j < COLS; j++) { - row["col_" + j] = i + "." + j; + var setUpGrid = function () { + if (grid) { + grid.destroy(); // doing the destroy at the start of setup, instead of in teardown, leaves a nice grid to see when you're viewing the test page. + } + var ROWS = 500, COLS = 10, row; + data = []; + for (var i = 0; i < ROWS; i++) { + row = { id: "id_" + i }; + for (var j = 0; j < COLS; j++) { + row["col_" + j] = i + "." + j; + } + data.push(row); } - data.push(row); - } - - var cols = [], col; - for (var i = 0; i < COLS; i++) { - cols.push({ - id: "col" + i, - field: "col_" + i, - name: "col_" + i - }); - } - - cols[0].minWidth = 70; - grid = new Slick.Grid("#container", data, cols); - grid.render(); + cols = [] + for (var i = 0; i < COLS; i++) { + cols.push({ + id: "col" + i, + field: "col_" + i, + name: "col_" + i + }); + } - module("grid - column resizing"); + cols[0].minWidth = 70; + + grid = new Slick.Grid("#container", data, cols); + grid.render(); + } + + module("grid - column resizing", { setup: setUpGrid }); test("minWidth is respected", function () { var firstCol = $("#container .slick-header-column:first"); @@ -60,7 +65,9 @@ $("#container .slick-resizable-handle:first").simulate("drag", { dx: 100, dy: 0 }); equal(cols[0].width, oldWidth+100-1, "columns array is updated"); }); - + + module("grid - data", { setup: setUpGrid }); + test("getData should return data", function () { equal(grid.getData(), data); }); From 03872579d1389f199d704f877283ca6dfc2678b4 Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 6 Mar 2014 11:20:16 -0800 Subject: [PATCH 002/124] Add a test to validate current method of updating column widths: `setColumns` --- tests/grid/grid.js | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/tests/grid/grid.js b/tests/grid/grid.js index fd1409b48..0e51bddfb 100755 --- a/tests/grid/grid.js +++ b/tests/grid/grid.js @@ -49,15 +49,25 @@ grid.render(); } + + + module("grid - data", { setup: setUpGrid }); + + test("getData should return data", function () { + equal(grid.getData(), data); + }); + + + module("grid - column resizing", { setup: setUpGrid }); - + test("minWidth is respected", function () { var firstCol = $("#container .slick-header-column:first"); firstCol.find(".slick-resizable-handle:first").simulate("drag", { dx: 100, dy: 0 }); firstCol.find(".slick-resizable-handle:first").simulate("drag", { dx: -200, dy: 0 }); equal(firstCol.outerWidth(), 70, "width set to minWidth"); }); - + test("onColumnsResized is fired on column resize", function () { expect(2); grid.onColumnsResized.subscribe(function() { ok(true,"onColumnsResized called") }); @@ -66,10 +76,18 @@ equal(cols[0].width, oldWidth+100-1, "columns array is updated"); }); - module("grid - data", { setup: setUpGrid }); - - test("getData should return data", function () { - equal(grid.getData(), data); + test("width can be set using `setColumns`", function () { + cols = grid.getColumns(); + col = cols[1]; + $cell = $( grid.getCellNode(0,1) ); + equal($cell.outerWidth(), col.width, "before adjusting, the measured width matches the set width"); + col.width = 123; + notEqual($cell.outerWidth(), col.width, "after configuring, but before setColumns, the measured width does NOT match the set width"); + grid.setColumns(cols); + $cell = $( grid.getCellNode(0,1) ); // Need to re-query the dom because the whole grid has been redrawn + equal($cell.outerWidth(), col.width, "after configuring and setColumns, the set width matches the measured width"); }); + + })(jQuery); \ No newline at end of file From f80f34b49c3d060e906730d1055078633dce4a95 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Thu, 6 Mar 2014 11:31:16 -0800 Subject: [PATCH 003/124] Made the grid a little larger to create a more realistic performance scenario --- tests/grid/grid.js | 7 +++++-- tests/grid/index.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/tests/grid/grid.js b/tests/grid/grid.js index 0e51bddfb..74048e9d7 100755 --- a/tests/grid/grid.js +++ b/tests/grid/grid.js @@ -24,7 +24,7 @@ if (grid) { grid.destroy(); // doing the destroy at the start of setup, instead of in teardown, leaves a nice grid to see when you're viewing the test page. } - var ROWS = 500, COLS = 10, row; + var ROWS = 500, COLS = 20, row; data = []; for (var i = 0; i < ROWS; i++) { row = { id: "id_" + i }; @@ -76,14 +76,17 @@ equal(cols[0].width, oldWidth+100-1, "columns array is updated"); }); - test("width can be set using `setColumns`", function () { + test("width can be set using setColumns", function () { cols = grid.getColumns(); col = cols[1]; $cell = $( grid.getCellNode(0,1) ); equal($cell.outerWidth(), col.width, "before adjusting, the measured width matches the set width"); col.width = 123; notEqual($cell.outerWidth(), col.width, "after configuring, but before setColumns, the measured width does NOT match the set width"); + start = Date.now() grid.setColumns(cols); + time = Date.now() - start; + console.log('grid.setColumns() time: ' + time + 'ms'); // Informational output only $cell = $( grid.getCellNode(0,1) ); // Need to re-query the dom because the whole grid has been redrawn equal($cell.outerWidth(), col.width, "after configuring and setColumns, the set width matches the measured width"); }); diff --git a/tests/grid/index.html b/tests/grid/index.html index cc089a463..869b11ea0 100644 --- a/tests/grid/index.html +++ b/tests/grid/index.html @@ -14,7 +14,7 @@




    -
    +
    From a9099b964175a5a311c2bcd9070aca7526b2b048 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Thu, 6 Mar 2014 13:42:03 -0800 Subject: [PATCH 004/124] new grid method `updateColumnWidths` provides a fast, surgical way to update only the widths of things. Still takes a columnDefinitions object. --- slick.grid.js | 37 +++++++++++++++++++++++++++++++++---- tests/grid/grid.js | 30 ++++++++++++++++++++++-------- tests/grid/index.html | 1 - 3 files changed, 55 insertions(+), 13 deletions(-) diff --git a/slick.grid.js b/slick.grid.js index c12bae9bb..f041f8f0e 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -544,6 +544,7 @@ if (typeof Slick === "undefined") { $headers.empty(); $headers.width(getHeadersWidth()); + // Get the data for each column in the DOM $headerRow.find(".slick-headerrow-column") .each(function() { var columnDef = $(this).data("column"); @@ -556,6 +557,7 @@ if (typeof Slick === "undefined") { }); $headerRow.empty(); + // Create and append each header cell for (var i = 0; i < columns.length; i++) { var m = columns[i]; @@ -1201,9 +1203,8 @@ if (typeof Slick === "undefined") { } } - function setColumns(columnDefinitions) { - columns = columnDefinitions; - + // Given a set of columns, make sure `minWidth <= width <= maxWidth` + function enforceWidthLimits(columns) { columnsById = {}; for (var i = 0; i < columns.length; i++) { var m = columns[i] = $.extend({}, columnDefaults, columns[i]); @@ -1215,9 +1216,12 @@ if (typeof Slick === "undefined") { m.width = m.maxWidth; } } + } + function setColumns(columnDefinitions) { + columns = columnDefinitions; + enforceWidthLimits(columns); updateColumnCaches(); - if (initialized) { invalidateAllRows(); createColumnHeaders(); @@ -1229,6 +1233,30 @@ if (typeof Slick === "undefined") { } } + // Given a column definition object, do all the steps required to react to a change in the widths of any of the columns + function updateColumnWidths(columnDefinitions) { + columns = columnDefinitions; + enforceWidthLimits(columns); + updateColumnCaches(); + if (initialized) { +// invalidateAllRows(); // This removes rows from cache. Would be needed if we were changing rows. +// createColumnHeaders(); // This completely redraws the headers and re-binds events + $headers.width(getHeadersWidth()); // Set the full width of all the headers together + // Surgically update only the widths of the header cells + $headerCells = $headers.children() + for (var i = 0; i < columns.length; i++) { + var m = columns[i]; + $el = $headerCells.eq( getColumnIndex(m.id) ); // Get the jQuery-wrapped instance of this column header + $el.width(m.width - headerColumnWidthDiff) + } +// removeCssRules(); +// createCssRules(); // These rules are responsible for heights and cell widths, but not column header widths. +// resizeCanvas(); // Might be needed, if the width changes cause a change in SlickGrid's canvas size + applyColumnWidths(); // Surgically update only cell widths (but not header cells, unfortunately) +// handleScroll(); + } + } + function getOptions() { return options; } @@ -3340,6 +3368,7 @@ if (typeof Slick === "undefined") { "unregisterPlugin": unregisterPlugin, "getColumns": getColumns, "setColumns": setColumns, + "updateColumnWidths": updateColumnWidths, "getColumnIndex": getColumnIndex, "updateColumnHeader": updateColumnHeader, "setSortColumn": setSortColumn, diff --git a/tests/grid/grid.js b/tests/grid/grid.js index 74048e9d7..39c673719 100755 --- a/tests/grid/grid.js +++ b/tests/grid/grid.js @@ -79,18 +79,32 @@ test("width can be set using setColumns", function () { cols = grid.getColumns(); col = cols[1]; - $cell = $( grid.getCellNode(0,1) ); - equal($cell.outerWidth(), col.width, "before adjusting, the measured width matches the set width"); - col.width = 123; - notEqual($cell.outerWidth(), col.width, "after configuring, but before setColumns, the measured width does NOT match the set width"); - start = Date.now() + col.width = 200; + start = Date.now(); grid.setColumns(cols); time = Date.now() - start; - console.log('grid.setColumns() time: ' + time + 'ms'); // Informational output only + console.log("grid.setColumns() time: " + time + "ms"); // Informational output only. Not using console.time because of compatibility. $cell = $( grid.getCellNode(0,1) ); // Need to re-query the dom because the whole grid has been redrawn - equal($cell.outerWidth(), col.width, "after configuring and setColumns, the set width matches the measured width"); + equal($cell.outerWidth(), col.width, "after configuring and setColumns, cell width matches the measured width"); + $headerCell = $("#container .slick-header-column").eq(1); + equal($headerCell.outerWidth(), col.width, "header cell width also matches the measured width"); }); - + test("width can be set using updateColumnWidths", function () { + cols = grid.getColumns(); + col = cols[1]; + $cell = $( grid.getCellNode(0,1) ); + equal($cell.outerWidth(), col.width, "before adjusting, the measured width matches the set width"); + ok(typeof grid.updateColumnWidths === "function", "Added a function"); + col.width = 200; + start = Date.now(); + grid.updateColumnWidths(cols); + time = Date.now() - start; + console.log("grid.updateColumnWidths() time: " + time + "ms"); // Informational output only. Not using console.time because of compatibility. + $cell = $( grid.getCellNode(0,1) ); // Need to re-query the dom because the whole grid has been redrawn + equal($cell.outerWidth(), col.width, "after configuring and setColumns, cell width matches the measured width"); + $headerCell = $("#container .slick-header-column").eq(1); + equal($headerCell.outerWidth(), col.width, "header cell width also matches the measured width"); + }); })(jQuery); \ No newline at end of file diff --git a/tests/grid/index.html b/tests/grid/index.html index 869b11ea0..c8e4030fa 100644 --- a/tests/grid/index.html +++ b/tests/grid/index.html @@ -4,7 +4,6 @@ SlickGrid - Grid tests -

    SlickGrid - Grid Test Suite

    From 338876298fdfd589105cf5cb001245d876a5341d Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Thu, 6 Mar 2014 13:45:42 -0800 Subject: [PATCH 005/124] Removed some unneeded comments --- slick.grid.js | 8 +------- tests/grid/grid.js | 5 ++--- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/slick.grid.js b/slick.grid.js index f041f8f0e..f3a1d3dad 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -1239,21 +1239,15 @@ if (typeof Slick === "undefined") { enforceWidthLimits(columns); updateColumnCaches(); if (initialized) { -// invalidateAllRows(); // This removes rows from cache. Would be needed if we were changing rows. -// createColumnHeaders(); // This completely redraws the headers and re-binds events $headers.width(getHeadersWidth()); // Set the full width of all the headers together // Surgically update only the widths of the header cells $headerCells = $headers.children() for (var i = 0; i < columns.length; i++) { var m = columns[i]; $el = $headerCells.eq( getColumnIndex(m.id) ); // Get the jQuery-wrapped instance of this column header - $el.width(m.width - headerColumnWidthDiff) + $el.width(m.width - headerColumnWidthDiff); } -// removeCssRules(); -// createCssRules(); // These rules are responsible for heights and cell widths, but not column header widths. -// resizeCanvas(); // Might be needed, if the width changes cause a change in SlickGrid's canvas size applyColumnWidths(); // Surgically update only cell widths (but not header cells, unfortunately) -// handleScroll(); } } diff --git a/tests/grid/grid.js b/tests/grid/grid.js index 39c673719..6d52e905d 100755 --- a/tests/grid/grid.js +++ b/tests/grid/grid.js @@ -83,7 +83,7 @@ start = Date.now(); grid.setColumns(cols); time = Date.now() - start; - console.log("grid.setColumns() time: " + time + "ms"); // Informational output only. Not using console.time because of compatibility. + console.log("grid.setColumns() time: " + time + "ms"); // Informational output only. Not using console.time because of compatibility. $cell = $( grid.getCellNode(0,1) ); // Need to re-query the dom because the whole grid has been redrawn equal($cell.outerWidth(), col.width, "after configuring and setColumns, cell width matches the measured width"); $headerCell = $("#container .slick-header-column").eq(1); @@ -95,12 +95,11 @@ col = cols[1]; $cell = $( grid.getCellNode(0,1) ); equal($cell.outerWidth(), col.width, "before adjusting, the measured width matches the set width"); - ok(typeof grid.updateColumnWidths === "function", "Added a function"); col.width = 200; start = Date.now(); grid.updateColumnWidths(cols); time = Date.now() - start; - console.log("grid.updateColumnWidths() time: " + time + "ms"); // Informational output only. Not using console.time because of compatibility. + console.log("grid.updateColumnWidths() time: " + time + "ms"); // Informational output only. Not using console.time because of compatibility. $cell = $( grid.getCellNode(0,1) ); // Need to re-query the dom because the whole grid has been redrawn equal($cell.outerWidth(), col.width, "after configuring and setColumns, cell width matches the measured width"); $headerCell = $("#container .slick-header-column").eq(1); From 3be76457f72c66e6e97850dc60eaebc2c5c9ac22 Mon Sep 17 00:00:00 2001 From: Eric Date: Mon, 31 Mar 2014 13:26:38 -0700 Subject: [PATCH 006/124] Update README.md --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 7994a2719..0f3f37e9a 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,14 @@ +# About this Fork + +This fork adds the following method: + +``` +grid.updateColumnWidths(columnDefinitions) +``` + +Using this method improves the performance of changing the width(s) of the 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). + + # Welcome to SlickGrid Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki). From a4670a143a93efe9f8887de767653ae996c37ea8 Mon Sep 17 00:00:00 2001 From: Eric Date: Mon, 31 Mar 2014 13:28:44 -0700 Subject: [PATCH 007/124] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0f3f37e9a..ff32bc520 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This fork adds the following method: grid.updateColumnWidths(columnDefinitions) ``` -Using this method improves the performance of changing the width(s) of the 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). +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. # Welcome to SlickGrid From 6409a08071e7eefaf15c14d53bd5fb399624fa21 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 31 Mar 2014 13:42:31 -0700 Subject: [PATCH 008/124] Added a bower file for submittal to the bower repo --- bower.json | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 000000000..acb2ec480 --- /dev/null +++ b/bower.json @@ -0,0 +1,20 @@ +{ + "name": "slickgrid-fastColumnSizing", + "version": "2.1.1", + "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid", + "authors": [ + "Eric Miller " + ], + "description": "Slickgrid with an extra method for fast, surgical column sizing.", + "moduleType": [ + "globals" + ], + "keywords": [ + "slickgrid", + "performance", + "autosize", + "column", + "size" + ], + "license": "MIT" +} From dc7a32599fb98594ee756f98a81df293f193f465 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 31 Mar 2014 13:45:58 -0700 Subject: [PATCH 009/124] why the tag is changed --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ff32bc520..3eaf076a5 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ 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. +Tagged as `2.2.1` so that it meets semver requirements but shows after the latest slickgrid tag of `2.02`. # Welcome to SlickGrid From 72cd7629fe98ff6455704dce9f658e982aa9964d Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 31 Mar 2014 13:52:08 -0700 Subject: [PATCH 010/124] versioning --- README.md | 4 ++-- bower.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3eaf076a5..aaa293d47 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,8 @@ 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. -Tagged as `2.2.1` so that it meets semver requirements but shows after the latest slickgrid tag of `2.02`. - +Tagged as `2.2.1` so that it meets semver requirements but shows after the non-semver slickgrid tag of `2.02`. +git # Welcome to SlickGrid Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki). diff --git a/bower.json b/bower.json index acb2ec480..dfd9f949e 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "slickgrid-fastColumnSizing", - "version": "2.1.1", + "version": "2.2.1", "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid", "authors": [ "Eric Miller " From a41578846d7efd5c4b24dcc563a457a036507d02 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 31 Mar 2014 13:52:50 -0700 Subject: [PATCH 011/124] still learning versioning --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index dfd9f949e..58d556fd6 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "slickgrid-fastColumnSizing", - "version": "2.2.1", + "version": "2.2.2", "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid", "authors": [ "Eric Miller " From 2700508765156b085c398c3e4bc418a7dcf8dfe6 Mon Sep 17 00:00:00 2001 From: albert-coatue Date: Tue, 1 Apr 2014 14:35:48 -0700 Subject: [PATCH 012/124] expose 'setupColumnResize' method --- slick.grid.js | 1 + 1 file changed, 1 insertion(+) diff --git a/slick.grid.js b/slick.grid.js index f3a1d3dad..a94d69df0 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -3369,6 +3369,7 @@ if (typeof Slick === "undefined") { "setSortColumns": setSortColumns, "getSortColumns": getSortColumns, "autosizeColumns": autosizeColumns, + "setupColumnResize": setupColumnResize, "getOptions": getOptions, "setOptions": setOptions, "getData": getData, From cf2cc9e2f1ff3ae379c8ee2843934932cb3f4a3d Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Tue, 1 Apr 2014 14:53:47 -0700 Subject: [PATCH 013/124] bump version, update readme --- README.md | 6 +++++- bower.json | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index aaa293d47..40ad1f243 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,12 @@ 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. -Tagged as `2.2.1` so that it meets semver requirements but shows after the non-semver slickgrid tag of `2.02`. +Tagged so that it meets semver requirements but shows after the non-semver slickgrid tag of `2.02`. git + +Also exposes the existing method `grid.setupColumnResize`, which allows you to re-enable column resizing if you're manually screwing around with the headers. + + # Welcome to SlickGrid Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki). diff --git a/bower.json b/bower.json index 58d556fd6..87b69de60 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "slickgrid-fastColumnSizing", - "version": "2.2.2", + "version": "2.2.4", "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid", "authors": [ "Eric Miller " From cbf3fd57702c561051ef25c9e743d39fc3c38585 Mon Sep 17 00:00:00 2001 From: Albert Wu Date: Tue, 20 May 2014 09:29:10 -0700 Subject: [PATCH 014/124] Add support for Slick Ranges toCell, toRow equal to Infinity. --- slick.grid.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/slick.grid.js b/slick.grid.js index a94d69df0..7bb1470d8 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -1178,6 +1178,12 @@ if (typeof Slick === "undefined") { if (canCellBeSelected(j, k)) { hash[j][columns[k].id] = options.selectedCellCssClass; } + if (k === columns.length - 1) { + break; + } + } + if (j === data.getLength() - 1) { + break; } } } From 57bc446611190d0618ade2994b57d76a39bac84b Mon Sep 17 00:00:00 2001 From: Albert Wu Date: Tue, 20 May 2014 09:33:00 -0700 Subject: [PATCH 015/124] bump up release --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 87b69de60..e8d530927 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "slickgrid-fastColumnSizing", - "version": "2.2.4", + "version": "2.2.5", "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid", "authors": [ "Eric Miller " From 2daaf0bb405cab9b9e5aae27c034a4d63afb1e0e Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 28 Jul 2014 15:56:52 -0700 Subject: [PATCH 016/124] New option `columnHeaderRenderer` lets you specify the markup to be used for column headers. It's a callback that receives a column object and should return a jquery-wrapped dom element. --- README.md | 1 - bower.json | 2 +- slick.grid.js | 443 +++++++++++++++++++++++++------------------------- 3 files changed, 225 insertions(+), 221 deletions(-) diff --git a/README.md b/README.md index 40ad1f243..7056ce2ea 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,6 @@ 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. Tagged so that it meets semver requirements but shows after the non-semver slickgrid tag of `2.02`. -git Also exposes the existing method `grid.setupColumnResize`, which allows you to re-enable column resizing if you're manually screwing around with the headers. diff --git a/bower.json b/bower.json index e8d530927..2d95a47eb 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "slickgrid-fastColumnSizing", - "version": "2.2.5", + "version": "2.2.7", "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid", "authors": [ "Eric Miller " diff --git a/slick.grid.js b/slick.grid.js index 7bb1470d8..5e3303af0 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -85,6 +85,7 @@ if (typeof Slick === "undefined") { fullWidthRows: false, multiColumnSort: false, defaultFormatter: defaultFormatter, + columnHeaderRenderer: columnHeaderRenderer, forceSyncScrolling: false, addNewRowCssClass: "new-row" }; @@ -132,7 +133,7 @@ if (typeof Slick === "undefined") { var canvasWidth; var viewportHasHScroll, viewportHasVScroll; var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding - cellWidthDiff = 0, cellHeightDiff = 0; + cellWidthDiff = 0, cellHeightDiff = 0; var absoluteColumnMinWidth; var tabbingDirection = 1; @@ -223,11 +224,11 @@ if (typeof Slick === "undefined") { }; $container - .empty() - .css("overflow", "hidden") - .css("outline", 0) - .addClass(uid) - .addClass("ui-widget"); + .empty() + .css("overflow", "hidden") + .css("outline", 0) + .addClass(uid) + .addClass("ui-widget"); // set up a positioning container if needed if (!/relative|absolute|fixed/.test($container.css("position"))) { @@ -243,8 +244,8 @@ if (typeof Slick === "undefined") { $headerRowScroller = $("
    ").appendTo($container); $headerRow = $("
    ").appendTo($headerRowScroller); $headerRowSpacer = $("
    ") - .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") - .appendTo($headerRowScroller); + .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") + .appendTo($headerRowScroller); $topPanelScroller = $("
    ").appendTo($container); $topPanel = $("
    ").appendTo($topPanelScroller); @@ -302,34 +303,34 @@ if (typeof Slick === "undefined") { bindAncestorScrollEvents(); $container - .bind("resize.slickgrid", resizeCanvas); + .bind("resize.slickgrid", resizeCanvas); $viewport - //.bind("click", handleClick) - .bind("scroll", handleScroll); + //.bind("click", handleClick) + .bind("scroll", handleScroll); $headerScroller - .bind("contextmenu", handleHeaderContextMenu) - .bind("click", handleHeaderClick) - .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter) - .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave); + .bind("contextmenu", handleHeaderContextMenu) + .bind("click", handleHeaderClick) + .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter) + .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave); $headerRowScroller - .bind("scroll", handleHeaderRowScroll); + .bind("scroll", handleHeaderRowScroll); $focusSink.add($focusSink2) - .bind("keydown", handleKeyDown); + .bind("keydown", handleKeyDown); $canvas - .bind("keydown", handleKeyDown) - .bind("click", handleClick) - .bind("dblclick", handleDblClick) - .bind("contextmenu", handleContextMenu) - .bind("draginit", handleDragInit) - .bind("dragstart", {distance: 3}, handleDragStart) - .bind("drag", handleDrag) - .bind("dragend", handleDragEnd) - .delegate(".slick-cell", "mouseenter", handleMouseEnter) - .delegate(".slick-cell", "mouseleave", handleMouseLeave); + .bind("keydown", handleKeyDown) + .bind("click", handleClick) + .bind("dblclick", handleDblClick) + .bind("contextmenu", handleContextMenu) + .bind("draginit", handleDragInit) + .bind("dragstart", {distance: 3}, handleDragStart) + .bind("drag", handleDrag) + .bind("dragend", handleDragEnd) + .delegate(".slick-cell", "mouseenter", handleMouseEnter) + .delegate(".slick-cell", "mouseleave", handleMouseLeave); // Work around http://crbug.com/312427. if (navigator.userAgent.toLowerCase().match(/webkit/) && - navigator.userAgent.toLowerCase().match(/macintosh/)) { + navigator.userAgent.toLowerCase().match(/macintosh/)) { $canvas.bind("mousewheel", handleMouseWheel); } } @@ -426,11 +427,11 @@ if (typeof Slick === "undefined") { function disableSelection($target) { if ($target && $target.jquery) { $target - .attr("unselectable", "on") - .css("MozUserSelect", "none") - .bind("selectstart.ui", function () { - return false; - }); // from jquery:ui.core.js 1.7.2 + .attr("unselectable", "on") + .css("MozUserSelect", "none") + .bind("selectstart.ui", function () { + return false; + }); // from jquery:ui.core.js 1.7.2 } } @@ -502,8 +503,8 @@ if (typeof Slick === "undefined") { }); $header - .attr("title", toolTip || "") - .children().eq(0).html(title); + .attr("title", toolTip || "") + .children().eq(0).html(title); trigger(self.onHeaderCellRendered, { "node": $header[0], @@ -560,37 +561,32 @@ if (typeof Slick === "undefined") { // Create and append each header cell for (var i = 0; i < columns.length; i++) { var m = columns[i]; - - var header = $("
    ") - .html("" + m.name + "") - .width(m.width - headerColumnWidthDiff) - .attr("id", "" + uid + m.id) - .attr("title", m.toolTip || "") - .data("column", m) - .addClass(m.headerCssClass || "") - .appendTo($headers); + header = options.columnHeaderRenderer(m) + header + .attr("id", "" + uid + m.id) + .data("column", m) + .addClass('ui-state-default slick-header-column') + .addClass(m.headerCssClass || "") + .width(m.width - headerColumnWidthDiff) + .appendTo($headers); if (options.enableColumnReorder || m.sortable) { header .on('mouseenter', onMouseEnter) .on('mouseleave', onMouseLeave); } - if (m.sortable) { header.addClass("slick-header-sortable"); header.append(""); } - trigger(self.onHeaderCellRendered, { "node": header[0], "column": m }); - if (options.showHeaderRow) { var headerRowCell = $("
    ") - .data("column", m) - .appendTo($headerRow); - + .data("column", m) + .appendTo($headerRow); trigger(self.onHeaderRowCellRendered, { "node": headerRowCell[0], "column": m @@ -605,6 +601,15 @@ if (typeof Slick === "undefined") { } } + // Given a column object, return a jquery element with HTML for the column + // Can be overridden by providing a function to options.columnHeaderRenderer + function columnHeaderRenderer(column) { + var $el = $("
    ") + .html("" + 'hi' + column.name + "") + .attr("title", column.toolTip || ""); + return $el + } + function setupColumnSort() { $headers.click(function (e) { // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328) @@ -729,151 +734,151 @@ if (typeof Slick === "undefined") { } $col = $(e); $("
    ") - .appendTo(e) - .bind("dragstart", function (e, dd) { - if (!getEditorLock().commitCurrentEdit()) { - return false; - } - pageX = e.pageX; - $(this).parent().addClass("slick-header-column-active"); - var shrinkLeewayOnRight = null, stretchLeewayOnRight = null; - // lock each column's width option to current width - columnElements.each(function (i, e) { - columns[i].previousWidth = $(e).outerWidth(); - }); - if (options.forceFitColumns) { - shrinkLeewayOnRight = 0; - stretchLeewayOnRight = 0; - // colums on right affect maxPageX/minPageX - for (j = i + 1; j < columnElements.length; j++) { - c = columns[j]; - if (c.resizable) { - if (stretchLeewayOnRight !== null) { - if (c.maxWidth) { - stretchLeewayOnRight += c.maxWidth - c.previousWidth; - } else { - stretchLeewayOnRight = null; - } - } - shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); - } - } - } - var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0; - for (j = 0; j <= i; j++) { - // columns on left only affect minPageX + .appendTo(e) + .bind("dragstart", function (e, dd) { + if (!getEditorLock().commitCurrentEdit()) { + return false; + } + pageX = e.pageX; + $(this).parent().addClass("slick-header-column-active"); + var shrinkLeewayOnRight = null, stretchLeewayOnRight = null; + // lock each column's width option to current width + columnElements.each(function (i, e) { + columns[i].previousWidth = $(e).outerWidth(); + }); + if (options.forceFitColumns) { + shrinkLeewayOnRight = 0; + stretchLeewayOnRight = 0; + // colums on right affect maxPageX/minPageX + for (j = i + 1; j < columnElements.length; j++) { c = columns[j]; if (c.resizable) { - if (stretchLeewayOnLeft !== null) { + if (stretchLeewayOnRight !== null) { if (c.maxWidth) { - stretchLeewayOnLeft += c.maxWidth - c.previousWidth; + stretchLeewayOnRight += c.maxWidth - c.previousWidth; } else { - stretchLeewayOnLeft = null; + stretchLeewayOnRight = null; } } - shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); + shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); } } - if (shrinkLeewayOnRight === null) { - shrinkLeewayOnRight = 100000; - } - if (shrinkLeewayOnLeft === null) { - shrinkLeewayOnLeft = 100000; - } - if (stretchLeewayOnRight === null) { - stretchLeewayOnRight = 100000; + } + var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0; + for (j = 0; j <= i; j++) { + // columns on left only affect minPageX + c = columns[j]; + if (c.resizable) { + if (stretchLeewayOnLeft !== null) { + if (c.maxWidth) { + stretchLeewayOnLeft += c.maxWidth - c.previousWidth; + } else { + stretchLeewayOnLeft = null; + } + } + shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); } - if (stretchLeewayOnLeft === null) { - stretchLeewayOnLeft = 100000; + } + if (shrinkLeewayOnRight === null) { + shrinkLeewayOnRight = 100000; + } + if (shrinkLeewayOnLeft === null) { + shrinkLeewayOnLeft = 100000; + } + if (stretchLeewayOnRight === null) { + stretchLeewayOnRight = 100000; + } + if (stretchLeewayOnLeft === null) { + stretchLeewayOnLeft = 100000; + } + maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft); + minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight); + }) + .bind("drag", function (e, dd) { + var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x; + if (d < 0) { // shrink column + x = d; + for (j = i; j >= 0; j--) { + c = columns[j]; + if (c.resizable) { + actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); + if (x && c.previousWidth + x < actualMinWidth) { + x += c.previousWidth - actualMinWidth; + c.width = actualMinWidth; + } else { + c.width = c.previousWidth + x; + x = 0; + } + } } - maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft); - minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight); - }) - .bind("drag", function (e, dd) { - var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x; - if (d < 0) { // shrink column - x = d; - for (j = i; j >= 0; j--) { + + if (options.forceFitColumns) { + x = -d; + for (j = i + 1; j < columnElements.length; j++) { c = columns[j]; if (c.resizable) { - actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); - if (x && c.previousWidth + x < actualMinWidth) { - x += c.previousWidth - actualMinWidth; - c.width = actualMinWidth; + if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { + x -= c.maxWidth - c.previousWidth; + c.width = c.maxWidth; } else { c.width = c.previousWidth + x; x = 0; } } } - - if (options.forceFitColumns) { - x = -d; - for (j = i + 1; j < columnElements.length; j++) { - c = columns[j]; - if (c.resizable) { - if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { - x -= c.maxWidth - c.previousWidth; - c.width = c.maxWidth; - } else { - c.width = c.previousWidth + x; - x = 0; - } - } + } + } else { // stretch column + x = d; + for (j = i; j >= 0; j--) { + c = columns[j]; + if (c.resizable) { + if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { + x -= c.maxWidth - c.previousWidth; + c.width = c.maxWidth; + } else { + c.width = c.previousWidth + x; + x = 0; } } - } else { // stretch column - x = d; - for (j = i; j >= 0; j--) { + } + + if (options.forceFitColumns) { + x = -d; + for (j = i + 1; j < columnElements.length; j++) { c = columns[j]; if (c.resizable) { - if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { - x -= c.maxWidth - c.previousWidth; - c.width = c.maxWidth; + actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); + if (x && c.previousWidth + x < actualMinWidth) { + x += c.previousWidth - actualMinWidth; + c.width = actualMinWidth; } else { c.width = c.previousWidth + x; x = 0; } } } - - if (options.forceFitColumns) { - x = -d; - for (j = i + 1; j < columnElements.length; j++) { - c = columns[j]; - if (c.resizable) { - actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); - if (x && c.previousWidth + x < actualMinWidth) { - x += c.previousWidth - actualMinWidth; - c.width = actualMinWidth; - } else { - c.width = c.previousWidth + x; - x = 0; - } - } - } - } - } - applyColumnHeaderWidths(); - if (options.syncColumnCellResize) { - applyColumnWidths(); } - }) - .bind("dragend", function (e, dd) { - var newWidth; - $(this).parent().removeClass("slick-header-column-active"); - for (j = 0; j < columnElements.length; j++) { - c = columns[j]; - newWidth = $(columnElements[j]).outerWidth(); - - if (c.previousWidth !== newWidth && c.rerenderOnResize) { - invalidateAllRows(); - } + } + applyColumnHeaderWidths(); + if (options.syncColumnCellResize) { + applyColumnWidths(); + } + }) + .bind("dragend", function (e, dd) { + var newWidth; + $(this).parent().removeClass("slick-header-column-active"); + for (j = 0; j < columnElements.length; j++) { + c = columns[j]; + newWidth = $(columnElements[j]).outerWidth(); + + if (c.previousWidth !== newWidth && c.rerenderOnResize) { + invalidateAllRows(); } - updateCanvasWidth(true); - render(); - trigger(self.onColumnsResized, {}); - }); + } + updateCanvasWidth(true); + render(); + trigger(self.onColumnsResized, {}); + }); }); } @@ -923,11 +928,11 @@ if (typeof Slick === "undefined") { $style = $(" - - -

    Examples

    -
    - -
    - - diff --git a/examples/pincushion1-simple.html b/examples/pincushion1-simple.html new file mode 100644 index 000000000..ad8e2fa6f --- /dev/null +++ b/examples/pincushion1-simple.html @@ -0,0 +1,70 @@ + + + + + SlickGrid example 1: Basic grid + + + + + + + + + + +
    +
    +     		+

    Demonstrates:

    +
      +
    • Simplest case of pinned columns
      • +
    +
    + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..62775c891 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + SlickGrid Examples + + + +

    Pinned Column Examples

    + +

    Classic Examples

    +
    + +
    + + From 2b905a31aade293e943f7499a35898dbddc4ea33 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 17 Nov 2014 17:50:00 -0800 Subject: [PATCH 061/124] run `npm install`, then `gulp` for a live reloading dev environment --- .gitignore | 2 ++ examples/pincushion1-simple.html | 4 ++-- gulpfile.coffee | 21 +++++++++++++++++++++ package.json | 9 +++++++++ 4 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 gulpfile.coffee create mode 100644 package.json diff --git a/.gitignore b/.gitignore index d2f89b666..b52649315 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ .gitk* .idea/* .DS_Store +node_modules/ +npm-debug.log \ No newline at end of file diff --git a/examples/pincushion1-simple.html b/examples/pincushion1-simple.html index ad8e2fa6f..550b3591f 100644 --- a/examples/pincushion1-simple.html +++ b/examples/pincushion1-simple.html @@ -2,7 +2,7 @@ - SlickGrid example 1: Basic grid + Pincushion Example 1 @@ -47,7 +47,7 @@

    Demonstrates:

    var options = { enableCellNavigation: true, enableColumnReorder: false, - pinnedCol: 1 + pinnedColumn: 1 }; $(function () { diff --git a/gulpfile.coffee b/gulpfile.coffee new file mode 100644 index 000000000..49ebf976b --- /dev/null +++ b/gulpfile.coffee @@ -0,0 +1,21 @@ + + +gulp = require 'gulp' +browserSync = require 'browser-sync' + + +# --------------------------------------- Task Flows +gulp.task 'liveServer', -> + browserSync server: baseDir: './' + gulp.watch [ + "index.html" + "slick.*.js" + "slick.*.css" + "examples/**" + ], + cwd: '', + browserSync.reload + + +# --------------------------------------- Task Bundles +gulp.task 'default', [ 'liveServer' ] diff --git a/package.json b/package.json new file mode 100644 index 000000000..9c7f7c86b --- /dev/null +++ b/package.json @@ -0,0 +1,9 @@ +{ + "name": "SlickGrid-Pincushion", + "version": "0.0.1", + "devDependencies": { + "browser-sync": "^1.6.0", + "coffee-script": "^1.8.0", + "gulp": "^3.8.9" + } +} From c0e4e85ceab87392a61ae152c802d9ccec2ad806 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 17 Nov 2014 17:57:05 -0800 Subject: [PATCH 062/124] adding enough columns to be sure when it virtualizes them --- examples/pincushion1-simple.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/examples/pincushion1-simple.html b/examples/pincushion1-simple.html index 550b3591f..cd3f35e4f 100644 --- a/examples/pincushion1-simple.html +++ b/examples/pincushion1-simple.html @@ -41,6 +41,16 @@

    Demonstrates:

    {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"} ]; From 9343048efb8d48c0967d25d7761aed1b7487df96 Mon Sep 17 00:00:00 2001 From: Eric Miller Date: Mon, 17 Nov 2014 20:35:38 -0800 Subject: [PATCH 063/124] ...I'm in it now. --- README.md | 4 ++ slick.grid.js | 147 ++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 112 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 5c4233ed0..5fbc6e740 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +# About the column pinning effort + +This adds pinned columns (not rows). I've only tested it on Chrome, because that's the use case I had. + # About this Fork This fork 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. diff --git a/slick.grid.js b/slick.grid.js index 64336de57..3e28aaf25 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -12,8 +12,9 @@ * NOTES: * Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods. * This increases the speed dramatically, but can only be done safely because there are no event handlers - * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() + * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() * and do proper cleanup. + * */ // make sure required JavaScript modules are loaded @@ -27,7 +28,6 @@ if (typeof Slick === "undefined") { throw "slick.core.js not loaded"; } - (function ($) { // Slick.Grid $.extend(true, window, { @@ -38,9 +38,9 @@ if (typeof Slick === "undefined") { // shared across all grids on the page var scrollbarDimensions; - var maxSupportedCssHeight; // browser's breaking point + var maxSupportedCssHeight; // browser's breaking point - ////////////////////////////////////////////////////////////////////////////////////////////// + // //////////////////////////////////////////////////////////////////////////////////////////// // SlickGrid class implementation (available as Slick.Grid) /** @@ -116,14 +116,17 @@ if (typeof Slick === "undefined") { // private var initialized = false; var $container; - var uid = "slickgrid_" + Math.round(1000000 * Math.random()); + var now = new Date(); + var quickDate = (now.getMonth()+1) + '-' + now.getDate() + var uid = "slickgrid_" + quickDate + '_' + Math.round(100000 * Math.random()); var self = this; var $focusSink, $focusSink2; - var $headerScroller; + //var $headerScroller; var $headers; - var $headerRow, $headerRowScroller, $headerRowSpacer; - var $topPanelScroller; - var $topPanel; + var $headerRow, $headerRowScroller; + var $headerRowSpacer; + //var $topPanelScroller; + //var $topPanel; var $viewport; var $canvas; var $style; @@ -183,6 +186,28 @@ if (typeof Slick === "undefined") { var rowNodeFromLastMouseWheelEvent; // this node must not be deleted while inertial scrolling var zombieRowNodeFromLastMouseWheelEvent; // node that was hidden instead of getting deleted + // To support pinned columns, we slice up the grid regions. + // Coords are top, center, bottom; and left, right. For short: T/C/B; L/R + // Everything is stored in one object for fun. + // This way, you can address elements like this: + // els.t.l.pane + // els.c.r.viewport + // .................... + // . TL . TR . + // .................... + // . CL . CR . + // .................... + var els = { + t: { l: {}, r: {} }, + c: { l: {}, r: {} } + //b: { l: {}, r: {} } + }; + // Inside this coord storage, there are: + // * Panes -- these are outside everything + // * viewports -- scrolling containers + // * canvas -- the content in full size (if it weren't virtualized) + var $activeCanvasNode; + ////////////////////////////////////////////////////////////////////////////////////////////// // Initialization @@ -198,6 +223,7 @@ if (typeof Slick === "undefined") { scrollbarDimensions = scrollbarDimensions || measureScrollbar(); options = $.extend({}, defaults, options); + console.log("slickgrid init(). options.pinnedColumn? " + options.pinnedColumn); validateAndEnforceOptions(); columnDefaults.width = options.defaultColumnWidth; @@ -237,31 +263,74 @@ if (typeof Slick === "undefined") { $focusSink = $("
    ").appendTo($container); - $headerScroller = $("
    ").appendTo($container); - $headers = $("
    ").appendTo($headerScroller); - $headers.width(getHeadersWidth()); - - $headerRowScroller = $("
    ").appendTo($container); - $headerRow = $("
    ").appendTo($headerRowScroller); - $headerRowSpacer = $("
    ") - .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") - .appendTo($headerRowScroller); - - $topPanelScroller = $("
    ").appendTo($container); - $topPanel = $("
    ").appendTo($topPanelScroller); - - if (!options.showTopPanel) { - $topPanelScroller.hide(); - } - - if (!options.showHeaderRow) { - $headerRowScroller.hide(); - } - - $viewport = $("
    ").appendTo($container); - $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto"); - - $canvas = $("
    ").appendTo($viewport); + // Containers for scrolling pinned columns + els.t.l.pane = $("
    ").appendTo($container); + els.t.r.pane = $("
    ").appendTo($container); + els.c.l.pane = $("
    ").appendTo($container); + els.c.r.pane = $("
    ").appendTo($container); + // Build this structure: + // .slick-pane.T.L + // .slick-viewport.T.L + // .slick-header-columns.L > *.colheaders + // ... + // .slick-pane.C.L + // .slick-headerrow.L + // .slick-viewport.C.L + // .grid-canvas.C.L > *.rows + + // T.op + // Rename headerScroller to topViewport + els.t.l.viewport = $("
    ").appendTo(els.t.l.pane); + els.t.r.viewport = $("
    ").appendTo(els.t.r.pane); + els.t.viewports = $().add(els.t.l.viewport).add(els.t.r.viewport); + //$headerScroller = $("
    ").appendTo($container); + // Rename header to canvas + els.t.l.canvas = $("
    ").appendTo(els.t.l.viewport); + els.t.r.canvas = $("
    ").appendTo(els.t.r.viewport); + $headers = els.t.canvii = $().add(els.t.l.canvas).add(els.t.r.canvas); + //$headers = $("
    ").appendTo($headerScroller); + + // Header Row + // TODO: the headerRow (used for summaries) + els.c.l.headerRow = $("
    ").appendTo(els.c.l.pane); + els.c.r.headerRow = $("
    ").appendTo(els.c.r.pane); + $headerRow = els.c.headerRows = $().add(els.t.l.headerRow).add(els.t.r.headerRow); + //if (!options.showHeaderRow) { + // $headerRowScroller.hide(); + //} + // TODO: what are these spacers for? + //$headerRowSpacerL = $("
    ") + // .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") + // .appendTo($headerRowScrollerL); + //$headerRowSpacerR = $("
    ") + // .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") + // .appendTo($headerRowScrollerR); + + // C.enter + els.c.l.viewport = $("
    "); + els.c.r.viewport = $("
    "); + els.c.viewports = $().add(els.c.l.viewport).add(els.c.r.viewport); + $viewport = els.c.viewports; + els.c.l.canvas = $("
    ").appendTo(els.c.l.viewport); + els.c.r.canvas = $("
    ").appendTo(els.c.r.viewport); + els.c.canvii = $().add(els.c.l.canvas).add(els.c.r.canvas); + $canvas = els.c.canvii; + + //$headers.width(getHeadersWidth()); + + // Default the active canvas to the top left + $activeCanvasNode = els.t.l.canvas; + + // TODO: what is a topPanel? + //$topPanelScroller = $("
    ").appendTo($container); + //$topPanel = $("
    ").appendTo($topPanelScroller); + //if (!options.showTopPanel) { + // $topPanelScroller.hide(); + //} + + //$viewport = $("
    ").appendTo($container); + //$viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto"); + //$canvas = $("
    ").appendTo($viewport); $focusSink2 = $focusSink.clone().appendTo($container); @@ -942,11 +1011,11 @@ if (typeof Slick === "undefined") { $style = $("