From a0040b8eba5e4291c1829be6b02dd282a67beba7 Mon Sep 17 00:00:00 2001
From: Ben McIntyre <email.ben.mcintyre@gmail.com>
Date: Wed, 10 May 2023 12:04:03 +0930
Subject: [PATCH] remove jQuery from example and add frozen rows/hidden cols
 example

---
 examples/example-column-hidden.html           |  73 ++++--
 ...n-columns-and-column-group-hidden-col.html | 228 ++++++++++++++++++
 2 files changed, 276 insertions(+), 25 deletions(-)
 create mode 100644 examples/example-frozen-columns-and-column-group-hidden-col.html

diff --git a/examples/example-column-hidden.html b/examples/example-column-hidden.html
index 105023e4..01deccd5 100644
--- a/examples/example-column-hidden.html
+++ b/examples/example-column-hidden.html
@@ -9,7 +9,6 @@
   <link rel="stylesheet" href="../examples/examples.css" type="text/css"/>
   <link rel="stylesheet" href="../examples/examples-unicode-icons.css" type="text/css"/>
   <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/flatpickr.css">
   <style>
     .cell-title {
       font-weight: bold;
@@ -97,8 +96,7 @@ <h2>View Source:</h2>
 
 <script src="../lib/firebugx.js"></script>
 
-<script src="../lib/jquery-3.1.0.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -182,17 +180,23 @@ <h2>View Source:</h2>
   grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
 }
 
-
-$(".grid-header .ui-icon")
-        .addClass("ui-state-default ui-corner-all")
-        .mouseover(function (e) {
-          $(e.target).addClass("ui-state-hover")
-        })
-        .mouseout(function (e) {
-          $(e.target).removeClass("ui-state-hover")
-        });
-
-$(function () {
+let elList = document.querySelectorAll('.grid-header .ui-icon');
+elList.forEach(function(el) {
+  el.classList.add('ui-state-default ui-corner-all');
+  el.addEventListener("mouseover", function(e) { e.target.classList.add('ui-state-hover'); });
+  el.addEventListener("mouseleave", function(e) { e.target.classList.remove('ui-state-hover'); });
+});
+
+//$(".grid-header .ui-icon")
+//        .addClass("ui-state-default ui-corner-all")
+//        .mouseover(function (e) {
+//          $(e.target).addClass("ui-state-hover")
+//        })
+//        .mouseout(function (e) {
+//          $(e.target).removeClass("ui-state-hover")
+//        });
+
+document.addEventListener("DOMContentLoaded", function() {
   // prepare the data
   for (var i = 0; i < 50000; i++) {
     var d = (data[i] = {});
@@ -212,14 +216,18 @@ <h2>View Source:</h2>
   grid = new Slick.Grid("#myGrid", dataView, columns, options);
   grid.setSelectionModel(new Slick.RowSelectionModel());
 
-  var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
+  var pager = new Slick.Controls.Pager(dataView, grid, document.querySelector('#pager'));
   var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
 
 
   // move the filter panel defined in a hidden div into grid top panel
-  $("#inlineFilterPanel")
-      .appendTo(grid.getTopPanel())
-      .show();
+  let el = document.querySelector('#inlineFilterPanel');
+  grid.getTopPanel().append(el);
+  el.style.display = 'block';
+  
+  //$("#inlineFilterPanel")
+  //    .appendTo(grid.getTopPanel())
+  //    .show();
 
   grid.onCellChange.subscribe(function (e, args) {
     dataView.updateItem(args.item.id, args.item);
@@ -227,7 +235,8 @@ <h2>View Source:</h2>
 
   grid.onAddNewRow.subscribe(function (e, args) {
     var item = {"num": data.length, "id": "new_" + (Math.round(Math.random() * 10000)), "title": "New task", "duration": "1 day", "percentComplete": 0, "start": "01/01/2009", "finish": "01/01/2009", "effortDriven": false};
-    $.extend(item, args.item);
+    utils.extend(item, args.item);
+    //$.extend(item, args.item);
     dataView.addItem(item);
   });
 
@@ -320,7 +329,7 @@ <h2>View Source:</h2>
   slider2.oninput = sliderCallback;
 
   // wire up the search textbox to apply the filter to the model
-  $("#txtSearch,#txtSearch2").keyup(function (e) {
+  document.querySelector('#txtSearch,#txtSearch2').addEventListener("keyup", function(e) { 
     Slick.GlobalEditorLock.cancelCurrentEdit();
 
     // clear on Esc
@@ -330,7 +339,19 @@ <h2>View Source:</h2>
 
     searchString = this.value;
     updateFilter();
-  });
+ });
+
+//  $("#txtSearch,#txtSearch2").keyup(function (e) {
+//    Slick.GlobalEditorLock.cancelCurrentEdit();
+//
+//    // clear on Esc
+//    if (e.which == 27) {
+//      this.value = "";
+//    }
+//
+//    searchString = this.value;
+//    updateFilter();
+//  });
 
   function updateFilter() {
     dataView.setFilterArgs({
@@ -340,7 +361,8 @@ <h2>View Source:</h2>
     dataView.refresh();
   }
 
-  $("#btnSelectRows").click(function () {
+//  $("#btnSelectRows").click(function () {
+  document.querySelector('#btnSelectRows').addEventListener("click", function(e) { 
     if (!Slick.GlobalEditorLock.commitCurrentEdit()) {
       return;
     }
@@ -351,10 +373,11 @@ <h2>View Source:</h2>
     }
 
     grid.setSelectedRows(rows);
-  });
+ });
 
-  $("#chkHideColumn").change(function () {
-    var hideCol = $("#chkHideColumn").prop('checked') || false;
+  document.querySelector('#chkHideColumn').addEventListener("change", function(e) { 
+  //$("#chkHideColumn").change(function () {
+    var hideCol = document.querySelector('#chkHideColumn').checked || false;
     columns[2].hidden = hideCol;
     grid.setColumns(columns);
   });
diff --git a/examples/example-frozen-columns-and-column-group-hidden-col.html b/examples/example-frozen-columns-and-column-group-hidden-col.html
new file mode 100644
index 00000000..95d58905
--- /dev/null
+++ b/examples/example-frozen-columns-and-column-group-hidden-col.html
@@ -0,0 +1,228 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.gridmenu.css" type="text/css"/>
+  <style>
+    .slick-preheader-panel.ui-state-default  {
+      width: 100%;
+      overflow: hidden;
+      border-left: 0px !important;
+      border-bottom: 0px !important;
+    }
+    .slick-preheader-panel .slick-header-columns {
+      border-bottom: 0px !important;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Frozen columns with extra header row grouping columns into categories</li>
+    </ul>
+    <div style="margin-bottom:10px">
+      <button onclick="setFrozenColumns(-1)">Remove Frozen Columns</button>
+      <button onclick="setFrozenColumns(2)">Set 3 Frozen Columns</button>
+    </div>
+      <br/>
+      <input id="chkHideColumn1" type="checkbox"/> Hide Duration Column
+      <br/><br/>
+      <input id="chkHideColumn2" type="checkbox"/> Hide Finish Column
+      <br/>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-frozen-columns-and-column-group.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-3.1.0.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.interactions.js"></script>
+<script src="../slick.dataview.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../controls/slick.columnpicker.js"></script>
+<script src="../controls/slick.gridmenu.js"></script>
+
+<script>
+  function CreateAddlHeaderRow() {
+    // when it's a frozen grid, we need to render both side (left/right)
+    if (options.frozenColumn >=0) {
+      // Add column groups to left panel
+      var $preHeaderPanel = $(grid.getPreHeaderPanelLeft());
+      renderHeaderGroups($preHeaderPanel, 0, options.frozenColumn + 1, columns.length);
+
+      // Add column groups to right panel
+      $preHeaderPanel = $(grid.getPreHeaderPanelRight());
+      renderHeaderGroups($preHeaderPanel, options.frozenColumn + 1, columns.length);
+    } else {
+      // when it's a regular grid (without frozen rows), after clearning frozen columns, we re-render everything on the left
+      var $preHeaderPanel = $(grid.getPreHeaderPanelLeft());
+      renderHeaderGroups($preHeaderPanel, 0, columns.length);
+    }
+
+    function renderHeaderGroups(preHeaderPanel, start, end) {
+      preHeaderPanel.empty()
+                    .addClass("slick-header-columns")
+                    .css('left','-1000px')
+                    .width(grid.getHeadersWidth());
+      preHeaderPanel.parent().addClass("slick-header");
+
+      var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
+      var m, header, lastColumnGroup = '', widthTotal = 0;
+      
+      for (var i = start; i < end; i++) {
+        m = columns[i];
+        if (lastColumnGroup === m.columnGroup && i>start) {
+          widthTotal += m.width;
+          header.width(widthTotal - headerColumnWidthDiff)
+        } else {
+            widthTotal = m.width;
+            header = $("<div class='ui-state-default slick-header-column' />")
+              .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>")
+              .width(m.width - headerColumnWidthDiff)
+              .appendTo(preHeaderPanel);
+        }
+        lastColumnGroup = m.columnGroup;
+      }
+    }
+  }
+
+  function setFrozenColumns(frozenCols) {
+    grid.setOptions({ frozenColumn: frozenCols });
+    options = grid.getOptions();
+    CreateAddlHeaderRow();
+  }
+
+  function pickerHeaderColumnValueExtractor(column) {
+    var headerGroup = column.columnGroup || '';
+    if (headerGroup) {
+      return headerGroup + ' - ' + column.name;
+    }
+    return column.name;
+  }
+
+  var dataView;
+  var grid;
+  var data = [];
+  var columnpicker;
+  var gridMenuControl;
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false,
+    createPreHeaderPanel: true,
+    showPreHeaderPanel: true,
+    preHeaderPanelHeight: 23,
+    explicitInitialization: true,
+    frozenColumn: 2,
+
+    // if you wish to include the columnGroup as part of the pickers, you can do so with following code 
+    columnPicker: {
+      headerColumnValueExtractor: pickerHeaderColumnValueExtractor
+    },
+    gridMenu: {
+      headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
+      customTitle: "Commands",
+      columnTitle: "Columns",
+      customItems: [
+        {
+          iconImage: "../images/delete.png",
+          title: "Clear Frozen Columns",
+          disabled: false,
+          command: "clear-frozen-columns",
+          cssClass: 'bold',     // container css class
+          textCssClass: 'red'   // just the text css class
+        }
+      ]
+    },
+  };
+  var columns = [
+    {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
+    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup:"Common Factor"},
+    {id: "duration", name: "Duration", field: "duration", columnGroup:"Common Factor"},
+    {id: "start", name: "Start", field: "start", minWidth: 140, columnGroup:"Period"},
+    {id: "finish", name: "Finish", field: "finish", minWidth: 140, columnGroup:"Period"},
+    {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 140, resizable: false, columnGroup:"Analysis"},
+    {id: "effort-driven", name: "Effort Driven", width: 140, minWidth: 20, maxWidth: 140, field: "effortDriven", columnGroup:"Analysis"}
+  ];
+
+  $(function () {
+    for (var i = 0; i < 50000; i++) {
+      var d = (data[i] = {});
+
+      d["id"] = "id_" + i;
+      d["num"] = i;
+      d["title"] = "Task " + i;
+      d["duration"] = "5 days";
+      d["start"] = "01/01/2009";
+      d["finish"] = "01/05/2009";
+      d["percentComplete"] = Math.round(Math.random() * 100);
+      d["effortDriven"] = (i % 5 == 0);
+    }
+
+    dataView = new Slick.Data.DataView();
+    grid = new Slick.Grid("#myGrid", dataView, columns, options);
+    columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
+    gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options);
+
+    dataView.onRowCountChanged.subscribe(function (e, args) {
+      grid.updateRowCount();
+      grid.render();
+    });
+
+    dataView.onRowsChanged.subscribe(function (e, args) {
+      grid.invalidateRows(args.rows);
+      grid.render();
+    });
+
+    grid.init();
+
+    grid.onColumnsResized.subscribe(function (e, args) {
+      CreateAddlHeaderRow();
+    });
+
+    // subscribe to Grid Menu event(s)
+    gridMenuControl.onCommand.subscribe(function(e, args) {
+      if(args.command === "clear-frozen-columns") {
+        setFrozenColumns(-1);
+      }
+    });
+    
+  document.querySelector('#chkHideColumn1').addEventListener("change", function(e) { 
+  //$("#chkHideColumn").change(function () {
+    var hideCol = document.querySelector('#chkHideColumn1').checked || false;
+    columns[2].hidden = hideCol;
+    grid.setColumns(columns);
+  });
+  
+  document.querySelector('#chkHideColumn2').addEventListener("change", function(e) { 
+  //$("#chkHideColumn").change(function () {
+    var hideCol = document.querySelector('#chkHideColumn2').checked || false;
+    columns[4].hidden = hideCol;
+    grid.setColumns(columns);
+  });
+    
+    // Initialise data
+    dataView.beginUpdate();
+    dataView.setItems(data);
+    dataView.endUpdate();
+    
+    CreateAddlHeaderRow();
+  })
+</script>
+</body>
+</html>