Fix column show/hide caching issue

The pop-up for showing and hiding columns had been caching the selection of columns once it was opened for the first time. When changing the list of columns on the fly this would cause it to still show the old list.

Author: ced-b

js/dynamic-table.jquery.js

@@ -1185,7 +1185,7 @@
  " <div class=\"ui-dynamic-table-filter-date-range-start\"></div> " +
  " </div> " +
  " <div> " +
- " <div style=\"padding-top: 3px; color: #ffffff; font-weight: bold\">End Date (<a class=\"ui-dynamic-table-filter-date-range-end-clear\" href=\"javascript:void(0)\">Clear</a>):</div> " +
+ " <div style=\"paddingR-top: 3px; color: #ffffff; font-weight: bold\">End Date (<a class=\"ui-dynamic-table-filter-date-range-end-clear\" href=\"javascript:void(0)\">Clear</a>):</div> " +
  " <div class=\"ui-dynamic-table-filter-date-range-end\"></div> " +
  " </div> " +
  " </div> " +
@@ -1508,10 +1508,19 @@
 
  var myHtml = 
  "<div class=\"ui-dynamic-table-filter ui-dynamic-table-settings\">" + 
- " <ul>";
+ " <ul></ul>" + 
+ "</div>";
+
+ var myPopUp = methods.private_getPopUp(
+ aComponent,
+ ".ui-dynamic-table-settings", 
+ myHtml
+ );
+
+ var myInnerHtml = "";
 
  myColumns.forEach(function(aColumn, aIndex) {
- myHtml +=
+ myInnerHtml +=
  "<li>" + 
  " <label>" + 
  " <input type=\"checkbox\" class=\"ui-dynamic-table-settings-column\" data-index=\"" + aIndex + "\"" + (aColumn.visible ? " checked" : "") + "> " + 
@@ -1520,15 +1529,7 @@
  "</li>";
  })
 
- myHtml +=
- " </ul>" + 
- "</div>";
-
- var myPopUp = methods.private_getPopUp(
- aComponent,
- ".ui-dynamic-table-settings", 
- myHtml
- );
+ myPopUp.find("ul").html(myInnerHtml);
 
  myPopUp.find(".ui-dynamic-table-settings-column")
  .off("change.dynamicTable")

sample/index.html

@@ -24,7 +24,8 @@
  // Initialize table
  $("#sample-grid").dynamicTable({
  fillParent : false,
- showCounter: true
+ showCounter: true,
+ changeColumns : true
  });
 
  // Define columns

sample/index2.html

@@ -140,11 +140,14 @@
  $("#selected-data").html("You selected <strong>" + aEvent.row.name + "</strong>"); 
  }); 
 
- // Add event listeners:
  $("#sample-grid").on("rowDoubleClick", function(aEvent) {
  $("#selected-data").html("You <em>double-clicked</em> <strong>" + aEvent.row.name + "</strong>"); 
  }); 
 
+ $("#change-columns").on("click", function(aEvent) {
+ $("#sample-grid").dynamicTable("data", myData, myColumns.sort(function(aCol1, aCol2) {return aCol1.name.localeCompare(aCol2.name)}));
+ }); 
+
  });
 
  </script>
@@ -194,6 +197,8 @@
  <div id="selected-data">&nbsp;</div>
  <div id="save-data">&nbsp;</div>
 
+ <button type="button" id="change-columns">Change Columns</button>
+
 
  </body>