feat(columnPicker): add columnDef option to exclude a column from picker

6pac · May 20, 2019 · 2c38c59 · 2c38c59
1 parent bfe6512
commit 2c38c59
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
@@ -111,7 +111,7 @@
         } else {
           columnLabel = defaults.headerColumnValueExtractor(columns[i]);
         }
-        
+
         $("<label />")
           .html(columnLabel)
           .prepend($input)
@@ -176,7 +176,16 @@
           ordered[i] = current.shift();
         }
       }
-      columns = ordered;
+
+      // filter out excluded column header when necessary
+      // (works with IE9+, older browser requires a polyfill for the filter to work, visit MDN for more info)
+      if (Array.isArray(ordered) && typeof ordered.filter === 'function') {
+        columns = ordered.filter(function(columnDef) {
+          return !columnDef.excludeFromColumnPicker;
+        });
+      } else {
+        columns = ordered;
+      }
     }
 
     function updateColumn(e) {

diff --git a/examples/example4-model.html b/examples/example4-model.html
@@ -115,7 +115,7 @@ <h2>View Source:</h2>
 var grid;
 var data = [];
 var columns = [
-  {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false },
+  {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false, excludeFromColumnPicker: true },
   {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
   {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text, sortable: true},
   {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, sortable: true},
@@ -128,7 +128,7 @@ <h2>View Source:</h2>
   columnPicker: {
     columnTitle: "Columns",
     hideForceFitButton: false,
-    hideSyncResizeButton: false, 
+    hideSyncResizeButton: false,
     forceFitTitle: "Force fit columns",
     syncResizeTitle: "Synchronous resize",
   },