From 034108ddde688586e67b44f9d58e8d4d0d773767 Mon Sep 17 00:00:00 2001
From: Ben McIntyre <email.ben.mcintyre@gmail.com>
Date: Sun, 21 May 2023 22:07:36 +0930
Subject: [PATCH] fix: columnpicker and column order for hidden columns

---
 controls/slick.columnpicker.js      | 5 ++---
 examples/example-column-hidden.html | 3 ++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
index 24049c9f..0979c2ba 100644
--- a/controls/slick.columnpicker.js
+++ b/controls/slick.columnpicker.js
@@ -124,8 +124,6 @@
 
       let columnId, columnLabel, excludeCssClass;
       for (var i = 0; i < columns.length; i++) {
-        if (columns[i].hidden) continue;
-        
         columnId = columns[i].id;
         excludeCssClass = columns[i].excludeFromColumnPicker ? "hidden" : "";
 
@@ -141,7 +139,7 @@
 
         columnCheckboxes.push(checkboxElm);
 
-        if (_grid.getColumnIndex(columnId) != null) {
+        if (_grid.getColumnIndex(columnId) != null && !columns[i].hidden) {
           checkboxElm.checked = true;
         }
 
@@ -275,6 +273,7 @@
         const columnId = e.target.dataset.columnid || '';
         let visibleColumns = [];
         columnCheckboxes.forEach((columnCheckbox, idx) => {
+          if (columns[idx].hidden !== undefined) { columns[idx].hidden = !columnCheckbox.checked; }
           if (columnCheckbox.checked) {
             visibleColumns.push(columns[idx]);
           }
diff --git a/examples/example-column-hidden.html b/examples/example-column-hidden.html
index 9586f3a1..bcb0916b 100644
--- a/examples/example-column-hidden.html
+++ b/examples/example-column-hidden.html
@@ -284,7 +284,8 @@ <h2>View Source:</h2>
 
   document.querySelector('#chkHideColumn').addEventListener("change", function(e) { 
     var hideCol = document.querySelector('#chkHideColumn').checked || false;
-    columns[2].hidden = hideCol;
+    // use the grid's columns not the local column var, since order and visibility may have changed if we are still using the old technique to hide columns
+    grid.getColumns()[grid.getColumnIndex('duration')].hidden = hideCol;
     grid.updateColumns();
   });