feature: make autoColumnSize feature aware of renderer functions (bef…

…ore this, cells rendered with autocomplete and numeric renderer were too narrow)
handsontable · Feb 26, 2013 · 7770f8a · 7770f8a
1 parent a052013
commit 7770f8a
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 Features:
 - numeric cell type. Updated pages [Numeric](http://handsontable.com/demo/numeric.html) and [Column sorting](http://handsontable.com/demo/sorting.html). Solves issues [#443](https://github.com/warpech/jquery-handsontable/issues/443), [#397](https://github.com/warpech/jquery-handsontable/issues/397), [#336](https://github.com/warpech/jquery-handsontable/issues/336). Partially solves issue ([#121](https://github.com/warpech/jquery-handsontable/issues/121)
+- make autoColumnSize feature aware of renderer functions (before this, cells rendered with autocomplete and numeric renderer were too narrow)
 
 Bugfix:
 - scrolls to top of table on any key press if the top is not on the screen ([#348](https://github.com/warpech/jquery-handsontable/issues/348))

diff --git a/dist/jquery.handsontable.full.css b/dist/jquery.handsontable.full.css
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Feb 26 2013 19:37:40 GMT+0100 (Central European Standard Time)
+ * Date: Tue Feb 26 2013 19:50:30 GMT+0100 (Central European Standard Time)
  */
 
 .handsontable {

diff --git a/dist/jquery.handsontable.full.js b/dist/jquery.handsontable.full.js
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Feb 26 2013 19:37:40 GMT+0100 (Central European Standard Time)
+ * Date: Tue Feb 26 2013 19:50:30 GMT+0100 (Central European Standard Time)
  */
 /*jslint white: true, browser: true, plusplus: true, indent: 4, maxerr: 50 */
 
@@ -3328,6 +3328,8 @@ function HandsontableAutoColumnSize() {
     , $tmp
     , tmpTbody
     , tmpThead
+    , tmpNoRenderer
+    , tmpRenderer
     , sampleCount = 5; //number of samples to take of each value length
 
   this.beforeInit = function () {
@@ -3337,28 +3339,48 @@ function HandsontableAutoColumnSize() {
   this.determineColumnWidth = function (col) {
     if (!tmp) {
       tmp = document.createElement('DIV');
+      tmp.className = 'handsontable';
       tmp.style.position = 'absolute';
       tmp.style.top = '0';
       tmp.style.left = '0';
       tmp.style.display = 'none';
 
-      tmpTbody = $('<table><thead><tr><td></td></tr></thead></table>')[0];
+      tmpThead = $('<table><thead><tr><td></td></tr></thead></table>')[0];
+      tmp.appendChild(tmpThead);
+
+      tmp.appendChild(document.createElement('BR'));
+
+      tmpTbody = $('<table><tbody><tr><td></td></tr></tbody></table>')[0];
       tmp.appendChild(tmpTbody);
 
       tmp.appendChild(document.createElement('BR'));
 
-      tmpThead = $('<table><tbody><tr><td></td></tr></tbody></table>')[0];
-      tmp.appendChild(tmpThead);
+      tmpNoRenderer = $('<table class="htTable"><tbody><tr><td></td></tr></tbody></table>')[0];
+      tmp.appendChild(tmpNoRenderer);
+
+      tmp.appendChild(document.createElement('BR'));
+
+      tmpRenderer = $('<table class="htTable"><tbody><tr><td></td></tr></tbody></table>')[0];
+      tmp.appendChild(tmpRenderer);
 
       document.body.appendChild(tmp);
       $tmp = $(tmp);
+
+      $tmp.find('table').css({
+        tableLayout: 'auto',
+        width: 'auto'
+      });
     }
 
     var rows = instance.countRows();
     var samples = {};
+    var maxLen = 0;
     for (var r = 0; r < rows; r++) {
       var value = Handsontable.helper.stringify(instance.getDataAtCell(r, col));
       var len = value.length;
+      if (len > maxLen) {
+        maxLen = len;
+      }
       if (!samples[len]) {
         samples[len] = {
           needed: sampleCount,
@@ -3386,8 +3408,23 @@ function HandsontableAutoColumnSize() {
     }
     tmpTbody.firstChild.firstChild.firstChild.innerHTML = txt; //TD innerHTML
 
+    $(tmpRenderer.firstChild.firstChild.firstChild).empty();
+    $(tmpNoRenderer.firstChild.firstChild.firstChild).empty();
+
     tmp.style.display = 'block';
     var width = $tmp.outerWidth();
+
+    var cellProperties = instance.getCellMeta(0, col);
+    if (cellProperties.renderer) {
+      var str = 9999999999;
+
+      tmpNoRenderer.firstChild.firstChild.firstChild.innerHTML = str;
+
+      cellProperties.renderer(instance, tmpRenderer.firstChild.firstChild.firstChild, 0, col, instance.colToProp(col), str, cellProperties);
+
+      width += $(tmpRenderer).width() - $(tmpNoRenderer).width(); //add renderer overhead to the calculated width
+    }
+
     tmp.style.display = 'none';
     return width;
   };

diff --git a/jquery.handsontable.css b/jquery.handsontable.css
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Feb 26 2013 19:37:40 GMT+0100 (Central European Standard Time)
+ * Date: Tue Feb 26 2013 19:50:30 GMT+0100 (Central European Standard Time)
  */
 
 .handsontable {

diff --git a/jquery.handsontable.js b/jquery.handsontable.js
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Feb 26 2013 19:37:40 GMT+0100 (Central European Standard Time)
+ * Date: Tue Feb 26 2013 19:50:30 GMT+0100 (Central European Standard Time)
  */
 /*jslint white: true, browser: true, plusplus: true, indent: 4, maxerr: 50 */
 
@@ -3328,6 +3328,8 @@ function HandsontableAutoColumnSize() {
     , $tmp
     , tmpTbody
     , tmpThead
+    , tmpNoRenderer
+    , tmpRenderer
     , sampleCount = 5; //number of samples to take of each value length
 
   this.beforeInit = function () {
@@ -3337,28 +3339,48 @@ function HandsontableAutoColumnSize() {
   this.determineColumnWidth = function (col) {
     if (!tmp) {
       tmp = document.createElement('DIV');
+      tmp.className = 'handsontable';
       tmp.style.position = 'absolute';
       tmp.style.top = '0';
       tmp.style.left = '0';
       tmp.style.display = 'none';
 
-      tmpTbody = $('<table><thead><tr><td></td></tr></thead></table>')[0];
+      tmpThead = $('<table><thead><tr><td></td></tr></thead></table>')[0];
+      tmp.appendChild(tmpThead);
+
+      tmp.appendChild(document.createElement('BR'));
+
+      tmpTbody = $('<table><tbody><tr><td></td></tr></tbody></table>')[0];
       tmp.appendChild(tmpTbody);
 
       tmp.appendChild(document.createElement('BR'));
 
-      tmpThead = $('<table><tbody><tr><td></td></tr></tbody></table>')[0];
-      tmp.appendChild(tmpThead);
+      tmpNoRenderer = $('<table class="htTable"><tbody><tr><td></td></tr></tbody></table>')[0];
+      tmp.appendChild(tmpNoRenderer);
+
+      tmp.appendChild(document.createElement('BR'));
+
+      tmpRenderer = $('<table class="htTable"><tbody><tr><td></td></tr></tbody></table>')[0];
+      tmp.appendChild(tmpRenderer);
 
       document.body.appendChild(tmp);
       $tmp = $(tmp);
+
+      $tmp.find('table').css({
+        tableLayout: 'auto',
+        width: 'auto'
+      });
     }
 
     var rows = instance.countRows();
     var samples = {};
+    var maxLen = 0;
     for (var r = 0; r < rows; r++) {
       var value = Handsontable.helper.stringify(instance.getDataAtCell(r, col));
       var len = value.length;
+      if (len > maxLen) {
+        maxLen = len;
+      }
       if (!samples[len]) {
         samples[len] = {
           needed: sampleCount,
@@ -3386,8 +3408,23 @@ function HandsontableAutoColumnSize() {
     }
     tmpTbody.firstChild.firstChild.firstChild.innerHTML = txt; //TD innerHTML
 
+    $(tmpRenderer.firstChild.firstChild.firstChild).empty();
+    $(tmpNoRenderer.firstChild.firstChild.firstChild).empty();
+
     tmp.style.display = 'block';
     var width = $tmp.outerWidth();
+
+    var cellProperties = instance.getCellMeta(0, col);
+    if (cellProperties.renderer) {
+      var str = 9999999999;
+
+      tmpNoRenderer.firstChild.firstChild.firstChild.innerHTML = str;
+
+      cellProperties.renderer(instance, tmpRenderer.firstChild.firstChild.firstChild, 0, col, instance.colToProp(col), str, cellProperties);
+
+      width += $(tmpRenderer).width() - $(tmpNoRenderer).width(); //add renderer overhead to the calculated width
+    }
+
     tmp.style.display = 'none';
     return width;
   };

diff --git a/src/plugins/autoColumnSize.js b/src/plugins/autoColumnSize.js
@@ -9,6 +9,8 @@ function HandsontableAutoColumnSize() {
     , $tmp
     , tmpTbody
     , tmpThead
+    , tmpNoRenderer
+    , tmpRenderer
     , sampleCount = 5; //number of samples to take of each value length
 
   this.beforeInit = function () {
@@ -18,28 +20,48 @@ function HandsontableAutoColumnSize() {
   this.determineColumnWidth = function (col) {
     if (!tmp) {
       tmp = document.createElement('DIV');
+      tmp.className = 'handsontable';
       tmp.style.position = 'absolute';
       tmp.style.top = '0';
       tmp.style.left = '0';
       tmp.style.display = 'none';
 
-      tmpTbody = $('<table><thead><tr><td></td></tr></thead></table>')[0];
+      tmpThead = $('<table><thead><tr><td></td></tr></thead></table>')[0];
+      tmp.appendChild(tmpThead);
+
+      tmp.appendChild(document.createElement('BR'));
+
+      tmpTbody = $('<table><tbody><tr><td></td></tr></tbody></table>')[0];
       tmp.appendChild(tmpTbody);
 
       tmp.appendChild(document.createElement('BR'));
 
-      tmpThead = $('<table><tbody><tr><td></td></tr></tbody></table>')[0];
-      tmp.appendChild(tmpThead);
+      tmpNoRenderer = $('<table class="htTable"><tbody><tr><td></td></tr></tbody></table>')[0];
+      tmp.appendChild(tmpNoRenderer);
+
+      tmp.appendChild(document.createElement('BR'));
+
+      tmpRenderer = $('<table class="htTable"><tbody><tr><td></td></tr></tbody></table>')[0];
+      tmp.appendChild(tmpRenderer);
 
       document.body.appendChild(tmp);
       $tmp = $(tmp);
+
+      $tmp.find('table').css({
+        tableLayout: 'auto',
+        width: 'auto'
+      });
     }
 
     var rows = instance.countRows();
     var samples = {};
+    var maxLen = 0;
     for (var r = 0; r < rows; r++) {
       var value = Handsontable.helper.stringify(instance.getDataAtCell(r, col));
       var len = value.length;
+      if (len > maxLen) {
+        maxLen = len;
+      }
       if (!samples[len]) {
         samples[len] = {
           needed: sampleCount,
@@ -67,8 +89,23 @@ function HandsontableAutoColumnSize() {
     }
     tmpTbody.firstChild.firstChild.firstChild.innerHTML = txt; //TD innerHTML
 
+    $(tmpRenderer.firstChild.firstChild.firstChild).empty();
+    $(tmpNoRenderer.firstChild.firstChild.firstChild).empty();
+
     tmp.style.display = 'block';
     var width = $tmp.outerWidth();
+
+    var cellProperties = instance.getCellMeta(0, col);
+    if (cellProperties.renderer) {
+      var str = 9999999999;
+
+      tmpNoRenderer.firstChild.firstChild.firstChild.innerHTML = str;
+
+      cellProperties.renderer(instance, tmpRenderer.firstChild.firstChild.firstChild, 0, col, instance.colToProp(col), str, cellProperties);
+
+      width += $(tmpRenderer).width() - $(tmpNoRenderer).width(); //add renderer overhead to the calculated width
+    }
+
     tmp.style.display = 'none';
     return width;
   };