diff --git a/js/src/treegrid/CHANGELOG b/js/src/treegrid/CHANGELOG
index fdb5449..03821eb 100644
--- 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
new file mode 100644
index 0000000..8641adb
--- /dev/null
+++ b/js/src/treegrid/examples/example17_responsive_columns.html
@@ -0,0 +1,85 @@
+
+
+
+ TreeGrid responsive columns
+
+
+ TreeGrid responsive columns
+
+ 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%.
+
+
+
+
diff --git a/js/src/treegrid/examples/index.html b/js/src/treegrid/examples/index.html
index ef642a5..3b34de0 100644
--- a/js/src/treegrid/examples/index.html
+++ b/js/src/treegrid/examples/index.html
@@ -25,6 +25,7 @@ Examples
example14_selective_drag_and_drop.html
example15_sorting.html
example16_css_zebra_stripes.html
+ example17_responsive_columns.html
diff --git a/js/src/treegrid/treegrid.js b/js/src/treegrid/treegrid.js
index 19c80e8..cec6a57 100644
--- 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);
};
/**