Allow dynamic updating of the column widths

almende · Nov 30, 2015 · 6e5d244 · 6e5d244
1 parent a466eb7
commit 6e5d244
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 16 deletions.
diff --git a/js/src/treegrid/CHANGELOG b/js/src/treegrid/CHANGELOG
@@ -2,6 +2,11 @@ CHAP Links Library - TREEGRID
 http://almende.github.com/chap-links-library/
 
 
+not yet released, version 1.8.1
+
+- Allow dynamic updating of the column widths.
+
+
 2015-11-20, version 1.8.0
 
 - Implemented css styles `.treegrid-item-even` and `.treegrid-item-odd`,

diff --git a/js/src/treegrid/examples/example17_responsive_columns.html b/js/src/treegrid/examples/example17_responsive_columns.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <title>TreeGrid responsive columns</title>
+
+    <script type="text/javascript" src="../treegrid.js"></script>
+    <link rel="stylesheet" type="text/css" href="../treegrid.css">
+
+    <script type="text/javascript">
+      var treegrid;
+      var data;
+      var dataConnector;
+
+      // Called when the page is loaded
+      function drawTreeGrid() {
+        var container = document.getElementById('mytreegrid');
+
+        function createConnectorOptions () {
+          var indentation = 20; // account for the left indentation
+          var treegridWidth = container.clientWidth - indentation;
+
+          // calculate the width we want the columns to have
+          // as a percentage of the total TreeGrid with
+          return {
+            columns: [
+              {
+                name: 'firstname',
+                text: 'First name',
+                width: 1/4 * treegridWidth  // 25%
+              },
+              {
+                name: 'lastname',
+                text: 'Last name',
+                width: 1/4 * treegridWidth  // 25%
+              },
+              {
+                name: 'fullname',
+                text: 'Full name',
+                width: 2/4 * treegridWidth,  // 50%
+                format: function() {
+                  return this.firstname + ' ' + this.lastname;
+                }
+              }
+            ]
+          }
+        }
+
+        data = [
+          {firstname: 'John bla bla bla', lastname: 'Smith foo foo'},
+          {firstname: 'Susan', lastname: 'Brown'},
+          {firstname: 'David', lastname: 'Harris'},
+          {firstname: 'Harry', lastname: 'Jones'}
+        ];
+        dataConnector = new links.DataTable(data, createConnectorOptions());
+
+        // specify options
+        var options = {
+          width: '100%',
+          height: '400px'
+        };  
+
+        // Instantiate our treegrid object.
+        treegrid = new links.TreeGrid(container, options);
+
+        // Draw our treegrid with the created data and options 
+        treegrid.draw(dataConnector);
+
+        window.onresize = function () {
+          dataConnector.setOptions(createConnectorOptions());
+        };
+
+        window.onresize();
+      }
+   </script>
+  </head>
+
+  <body onload="drawTreeGrid();">
+    <h1>TreeGrid responsive columns</h1>
+    <p>
+      The TreeGrid itself not responsive, but using some JavaScript it's possible to make the column widths responsive.
+      In the TreeGrid below, the columns have widths of 25%, 25%, and 50%.
+    </p>
+    <div id="mytreegrid"></div>
+  </body>
+</html>
diff --git a/js/src/treegrid/examples/index.html b/js/src/treegrid/examples/index.html
@@ -25,6 +25,7 @@ <h1>Examples</h1>
     <p><a href="example14_selective_drag_and_drop.html">example14_selective_drag_and_drop.html</a></p>
     <p><a href="example15_sorting.html">example15_sorting.html</a></p>
     <p><a href="example16_css_zebra_stripes.html">example16_css_zebra_stripes.html</a></p>
+    <p><a href="example17_responsive_columns.html">example17_responsive_columns.html</a></p>
 
 </div>
 </body>

diff --git a/js/src/treegrid/treegrid.js b/js/src/treegrid/treegrid.js
@@ -1200,6 +1200,14 @@ links.TreeGrid.Grid.prototype.reflow = function() {
     var resized = false,
         visibleItems = this.visibleItems;
 
+    // check for changes in columns options
+    var latestColumns = this.dataConnector.getOptions().columns;
+    var columnsStr = JSON.stringify(latestColumns);
+    if (columnsStr != this.lastColumnsStr) {
+        this.setColumns(latestColumns);
+        this.lastColumnsStr = columnsStr;
+    }
+
     // preform a reflow on all childs (the header, visible items, expanded items)
     if (this.header) {
         var headerResized = this.header.reflow();
@@ -1244,7 +1252,7 @@ links.TreeGrid.Grid.prototype.reflow = function() {
         for (var j = 0, jMax = columns.length; j < jMax; j++) {
             var column = columns[j];
 
-            if (!column.fixedWidth) {
+            if (column && !column.fixedWidth) {
                 var width = widths[j] + indentationWidth;
                 if (width > column.width) {
                     column.width = width;
@@ -2250,19 +2258,15 @@ links.TreeGrid.Header.prototype.repaint = function () {
         domHeader.style.height = this.height + 'px';
         domHeader.style.width = this.width + 'px';
 
-        /* TODO: width of the header?
-         if (this.left) {
-         var lastColumn = this.columns[this.columns.length-1];
-         header.dom.style.width = lastColumn.left+ lastColumn.width + 'px';
-         }
-         else {
-         header.dom.style.width = '100%';
-         }*/
-
         // position the columns
         var domFields = this.dom.fields;
         for (var i = 0, iMax = Math.min(domFields.length, columns.length); i < iMax; i++) {
-            domFields[i].style.left = columns[i].left + 'px';
+            var col = columns[i];
+            domFields[i].style.left = col.left + 'px';
+
+            if (col && col.fixedWidth) {
+                domFields[i].style.width = col.width + 'px';
+            }
         }
     }
     else {
@@ -3273,11 +3277,6 @@ links.TreeGrid.Item.prototype._repaintFields = function() {
                 //domField.style.position = 'relative';
                 domField.style.top = '0px';
 
-                var col = this.columns[i];
-                if (col && col.fixedWidth) {
-                    domField.style.width = col.width + 'px';
-                }
-
                 domField.innerHTML = field;
                 domFrame.appendChild(domField);
                 domFields.push(domField);
@@ -3369,6 +3368,10 @@ links.TreeGrid.Item.prototype._repaintFields = function() {
                 var domField = domFields[i];
                 if (domField) {
                     domField.style.left = col.left + 'px';
+
+                    if (col && col.fixedWidth) {
+                        domField.style.width = col.width + 'px';
+                    }
                 }
             }
         }
@@ -4237,6 +4240,7 @@ links.DataConnector.prototype.removeEventListener = function (callback) {
  */
 links.DataConnector.prototype.setOptions = function (options) {
     this.options = options || {};
+    this.trigger('change', undefined);
 };
 
 /**