chore: use correct slickgrid function to toggle draggable grouping row (

#1290) * chore: use correct slickgrid function to toggle draggable grouping row
ghiscoding · Nov 26, 2024 · 8145a02 · 8145a02
1 parent f492425
commit 8145a02
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/packages/demo/src/examples/slickgrid/example18.html b/packages/demo/src/examples/slickgrid/example18.html
@@ -34,7 +34,7 @@ <h2>
       <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="expand-all-btn" click.trigger="expandAllGroups()">
         <i class="mdi mdi-arrow-expand"></i> Expand all groups
       </button>
-      <button class="btn btn-outline-secondary btn-xs btn-icon" click.trigger="toggleDraggableGroupingRow()">
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="toggle-draggable-grouping-row" click.trigger="toggleDraggableGroupingRow()">
         Toggle Draggable Grouping Row
       </button>
       <button class="btn btn-outline-secondary btn-xs btn-icon" click.trigger="exportToExcel()">
@@ -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
@@ -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
@@ -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', () => {