From 03abe1ec3062ac8457276d2d9af773b146444ba5 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Mon, 25 Nov 2024 23:22:09 -0500
Subject: [PATCH] chore: use correct slickgrid function to toggle draggable
 grouping row

---
 .../demo/src/examples/slickgrid/example18.html    |  4 ++--
 packages/demo/src/examples/slickgrid/example18.ts | 11 +----------
 test/cypress/e2e/example18.cy.ts                  | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/demo/src/examples/slickgrid/example18.html b/packages/demo/src/examples/slickgrid/example18.html
index 17648f33b..030459a37 100644
--- a/packages/demo/src/examples/slickgrid/example18.html
+++ b/packages/demo/src/examples/slickgrid/example18.html
@@ -80,8 +80,8 @@ <h2>
         <div class="row form-group">
           <label for="field1" class="col-sm-3 mb-2">Group by field(s)</label>
           <div class="form-group col-md-3 grouping-selects" repeat.for="groupField of selectedGroupingFields">
-            <select class="form-select" change.trigger="groupByFieldName(column.id, $index)"
-                    value.bind="selectedGroupingFields[$index]">
+            <select class="form-select" change.trigger="groupByFieldName()"
+                    value.bind="groupField">
               <option model.bind="''">...</option>
               <option model.bind="column.id" repeat.for="column of columnDefinitions">${column.name}</option>
             </select>
diff --git a/packages/demo/src/examples/slickgrid/example18.ts b/packages/demo/src/examples/slickgrid/example18.ts
index 084424f50..261b86fbf 100644
--- a/packages/demo/src/examples/slickgrid/example18.ts
+++ b/packages/demo/src/examples/slickgrid/example18.ts
@@ -4,7 +4,6 @@ import {
   Aggregators,
   type AureliaGridInstance,
   type Column,
-  DelimiterType,
   FieldType,
   FileType,
   Filters,
@@ -317,14 +316,6 @@ export class Example18 {
     });
   }
 
-  exportToCsv(type = 'csv') {
-    this.textExportService.exportToFile({
-      delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
-      filename: 'myExport',
-      format: (type === 'csv') ? FileType.csv : FileType.txt
-    });
-  }
-
   groupByDurationOrderByCount(sortedByCount = false) {
     this.durationOrderByCount = sortedByCount;
     this.clearGrouping(false);
@@ -399,7 +390,7 @@ export class Example18 {
 
   toggleDraggableGroupingRow() {
     this.clearGroupsAndSelects();
-    this.gridObj.setPreHeaderPanelVisibility(!this.gridObj.getOptions().showPreHeaderPanel);
+    this.gridObj.setTopHeaderPanelVisibility(!this.gridObj.getOptions().showTopHeaderPanel);
   }
 
   toggleDarkMode() {
diff --git a/test/cypress/e2e/example18.cy.ts b/test/cypress/e2e/example18.cy.ts
index ada4c25b1..3bd071604 100644
--- a/test/cypress/e2e/example18.cy.ts
+++ b/test/cypress/e2e/example18.cy.ts
@@ -210,6 +210,21 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
       cy.get('.grouping-selects select:nth(1)').should('not.have.value');
       cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
+
+    it('should be able to toggle draggable grouping row (top-header panel)', () => {
+      cy.get('.slick-topheader-panel')
+        .should('be.visible');
+
+      cy.get('[data-test="toggle-draggable-grouping-row"]').click();
+
+      cy.get('.slick-topheader-panel')
+        .should('be.hidden');
+
+      cy.get('[data-test="toggle-draggable-grouping-row"]').click();
+
+      cy.get('.slick-topheader-panel')
+        .should('be.visible');
+    });
   });
 
   describe('Column Picker tests', () => {