feat: add Grouping to Grid State (#2101)

* feat: add Grouping to Grid State

Author: ghiscoding

demos/aurelia/src/examples/slickgrid/example18.ts

@@ -246,6 +246,7 @@ export class Example18 {
         sortDescIconCssClass: 'mdi mdi-arrow-down',
         onGroupChanged: (_e, args) => this.onGroupChanged(args),
         onExtensionRegistered: (extension) => (this.draggableGroupingPlugin = extension),
+        initialGroupBy: ['duration'],
       },
       darkMode: this._darkMode,
       enableTextExport: true,

demos/aurelia/test/cypress/e2e/example18.cy.ts

@@ -22,6 +22,24 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
       .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
   });
 
+  it('should initially be grouped by "Duration" when loading the grid', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+      'contain',
+      'Duration: 0'
+    );
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(2)`).should('contain', '0');
+  });
+
+  it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
+    cy.get('[data-test="clear-grouping-btn"]').click();
+    cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');
+
+    cy.get('#grid18')
+      .find('.slick-draggable-dropzone-placeholder')
+      .should('be.visible')
+      .should('have.text', 'Drop a column header here to group by the column');
+  });
+
   it('should have a draggable dropzone on top of the grid in the top-header section', () => {
     cy.get('#grid18').find('.slick-topheader-panel .slick-dropzone:visible').contains('Drop a column header here to group by the column');
   });

demos/react/src/examples/slickgrid/Example18.tsx

@@ -240,9 +240,8 @@ const Example18: React.FC = () => {
         sortAscIconCssClass: 'mdi mdi-arrow-up',
         sortDescIconCssClass: 'mdi mdi-arrow-down',
         onGroupChanged: (_e, args) => onGroupChanged(args),
-        onExtensionRegistered: (extension) => {
-          setDraggableGroupingPlugin(extension);
-        },
+        onExtensionRegistered: (extension) => setDraggableGroupingPlugin(extension),
+        initialGroupBy: ['duration'],
       },
       darkMode,
       enableTextExport: true,

demos/react/test/cypress/e2e/example18.cy.ts

@@ -22,6 +22,24 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
       .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
   });
 
+  it('should initially be grouped by "Duration" when loading the grid', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+      'contain',
+      'Duration: 0'
+    );
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(2)`).should('contain', '0');
+  });
+
+  it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
+    cy.get('[data-test="clear-grouping-btn"]').click();
+    cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');
+
+    cy.get('#grid18')
+      .find('.slick-draggable-dropzone-placeholder')
+      .should('be.visible')
+      .should('have.text', 'Drop a column header here to group by the column');
+  });
+
   it('should have a draggable dropzone on top of the grid in the top-header section', () => {
     cy.get('#grid18').find('.slick-topheader-panel .slick-dropzone:visible').contains('Drop a column header here to group by the column');
   });

demos/vanilla/src/examples/example03.ts

@@ -383,6 +383,11 @@ export default class Example03 {
         // groupIconCssClass: 'mdi mdi-drag-vertical',
         initialGroupBy: ['duration'],
       },
+      // Grouping Grid Presets only works with DraggableGrouping plugin (not regular Grouping),
+      // however, it's typically better to use `initialGroupBy: []`
+      presets: {
+        grouping: ['duration'],
+      },
       enableCheckboxSelector: true,
       enableRowSelection: true,
       checkboxSelector: {

demos/vue/src/components/Example18.vue

@@ -238,6 +238,7 @@ function defineGrid() {
       sortDescIconCssClass: 'mdi mdi-arrow-down',
       onGroupChanged: (_e, args) => onGroupChanged(args),
       onExtensionRegistered: (extension) => (draggableGroupingPlugin = extension),
+      initialGroupBy: ['duration'],
     },
     darkMode: darkMode.value,
     enableTextExport: true,

demos/vue/test/cypress/e2e/example18.cy.ts

@@ -22,6 +22,24 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
       .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
   });
 
+  it('should initially be grouped by "Duration" when loading the grid', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+      'contain',
+      'Duration: 0'
+    );
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(2)`).should('contain', '0');
+  });
+
+  it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
+    cy.get('[data-test="clear-grouping-btn"]').click();
+    cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');
+
+    cy.get('#grid18')
+      .find('.slick-draggable-dropzone-placeholder')
+      .should('be.visible')
+      .should('have.text', 'Drop a column header here to group by the column');
+  });
+
   it('should have a draggable dropzone on top of the grid in the top-header section', () => {
     cy.get('#grid18').find('.slick-topheader-panel .slick-dropzone:visible').contains('Drop a column header here to group by the column');
   });

docs/grid-functionalities/grid-state-preset.md

@@ -82,6 +82,7 @@ export interface CurrentSorter {
 export interface GridState {
   columns?: CurrentColumn[] | null;
   filters?: CurrentFilter[] | null;
+  grouping?: string[] | null;
   sorters?: CurrentSorter[] | null;
   pagination?: {
     pageNumber: number;
@@ -93,6 +94,9 @@ export interface GridState {
 }
 ```
 
+> [!NOTE]
+> You can get Grouping column Ids as Grid State but it is limited to Draggable Grouping **only** via Grid Presets and it will not work with regular Grouping.
+
 #### Example
 For example, we can set `presets` on a grid like so:
 
@@ -145,6 +149,7 @@ export class GridExample {
         pagination: { pageNumber: 2, pageSize: 20 }
       }
     };
+  }
 }
 ```
 
@@ -185,7 +190,7 @@ export class GridExample {
 </div>
 ```
 ## How to Load Grid with certain Columns Preset (example hide certain Column(s) on load)
-You can show/hide or even change a column position via the `presets`, yes `presets` is that powerful. All you need to do is to pass all Columns that you want to show as part of the `columns` property of `presets`. Typically you already have the entire columns definition since you just defined it, so you can loop through it and just use `map` to list the `columns` according to the structure needed (see [preset structure](Grid-State-&-Preset#structure.md)). What you have to know is that whatever array you provide to `presets`, that will equal to what the user will see and also in which order the columns will show (the array order does matter in this case). If a Columns is omitted from that array, then it will be considered to be a hidden column (you can still show it through Grid Menu and/or Column Picker).
+You can show/hide or even change a column position via the `presets`, yes `presets` is that powerful. All you need to do is to pass all Columns that you want to show as part of the `columns` property of `presets`. Typically you already have the entire columns definition since you just defined it, so you can loop through it and just use `map` to list the `columns` according to the structure needed (see [preset structure](grid-state-preset#structure.md)). What you have to know is that whatever array you provide to `presets`, that will equal to what the user will see and also in which order the columns will show (the array order does matter in this case). If a Columns is omitted from that array, then it will be considered to be a hidden column (you can still show it through Grid Menu and/or Column Picker).
 
 So let say that we want to hide the last Column on page load, we can just find the column by it's `id` that you want to hide and pass the new column definition to the `presets` (again make sure to follow the correct preset structure).
 

frameworks/angular-slickgrid/docs/TOC.md

@@ -56,7 +56,7 @@
 * [Export to Excel](grid-functionalities/Export-to-Excel.md)
 * [Export to File (csv/txt)](grid-functionalities/Export-to-Text-File.md)
 * [Grid Menu](grid-functionalities/Grid-Menu.md)
-* [Grid State & Presets](grid-functionalities/Grid-State-&-Preset.md)
+* [Grid State & Presets](grid-functionalities/grid-state-preset.md)
 * [Grouping & Aggregators](grid-functionalities/grouping-and-aggregators.md)
 * [Header & Footer Slots](grid-functionalities/header-footer-slots.md)
 * [Header Menu & Header Buttons](grid-functionalities/Header-Menu-&-Header-Buttons.md)

frameworks/angular-slickgrid/docs/column-functionalities/filters/select-filter.md

@@ -91,10 +91,10 @@ If you want to load the grid with certain default filter(s), you can use the fol
 - `searchTerms` (array of values)
 
 #### Note
-Even though the option of `searchTerms` it is much better to use the more powerful `presets` grid options, please refer to the [Grid State & Presets](../../grid-functionalities/Grid-State-&-Preset#grid-presets) for more info.
+Even though the option of `searchTerms` it is much better to use the more powerful `presets` grid options, please refer to the [Grid State & Presets](../../grid-functionalities/grid-state-preset#grid-presets) for more info.
 
 **NOTE**
-If you also have `presets` in the grid options, then your `searchTerms` will be ignored completely (even if it's a different column) since `presets` have higher priority over `searchTerms`. See [Grid State & Grid Presets](../../grid-functionalities/Grid-State-&-Preset.md) from more info.
+If you also have `presets` in the grid options, then your `searchTerms` will be ignored completely (even if it's a different column) since `presets` have higher priority over `searchTerms`. See [Grid State & Grid Presets](../../grid-functionalities/grid-state-preset.md) from more info.
 
 #### Sample
 ```ts
@@ -207,7 +207,7 @@ Note: the defaults for single & multiple select filters are different
 ```ts
 // define you columns, in this demo Effort Driven will use a Select Filter
 this.columnDefinitions = [
-  { 
+  {
     id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
     formatter: Formatters.checkmarkMaterial,
     type: 'boolean',