feat: add initialGroupBy to Draggable Grouping

cypress/e2e/example-draggable-grouping.cy.ts

@@ -1,4 +1,4 @@
-describe('Example - Draggable Grouping', { retries: 1 }, () => {
+describe('Example - Draggable Grouping', { retries: 0 }, () => {
   const GRID_ROW_HEIGHT = 25;
   const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', 'Cost', 'Effort-Driven'];
   for (let i = 0; i < 30; i++) {
@@ -23,6 +23,21 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
       .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
   });
 
+  it('should initially be grouped by "Duration" when loading the grid', () => {
+    cy.get(`[style*="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+    cy.get(`[style*="top: ${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('.slick-group-toggle-all').should('be.hidden');
+
+    cy.get('#myGrid')
+      .find('.slick-placeholder')
+      .should('be.visible')
+      .should('have.text', 'Drop a column header here to group by the column :)');
+  });
+
   it('should have 6x draggable icons', () => {
     cy.get('.slick-column-groupable')
       .should('have.length', 6);

examples/example-draggable-grouping.html

@@ -408,7 +408,13 @@ <h2>View Source:</h2>
 }
 
 document.addEventListener("DOMContentLoaded", function() {
-  draggableGrouping = new Slick.DraggableGrouping({iconImage :'../images/delete.png', /*deleteIconCssClass :'sgi sgi-close',*/ groupIconCssClass: 'sgi sgi-drag-vertical', dropPlaceHolderText: 'Drop a column header here to group by the column :)'});
+  draggableGrouping = new Slick.DraggableGrouping({
+    iconImage :'../images/delete.png',
+    /*deleteIconCssClass :'sgi sgi-close',*/
+    groupIconCssClass: 'sgi sgi-drag-vertical',
+    dropPlaceHolderText: 'Drop a column header here to group by the column :)',
+    initialGroupBy: ['duration'],
+  });
 
   var options = {
     enableCellNavigation: true,

src/models/draggableGroupingOption.interface.ts

@@ -22,6 +22,9 @@ export interface DraggableGroupingOption {
   /** Defaults to False, should we show the Sorting icons on each group by element? */
   hideGroupSortIcons?: boolean;
 
+  /** optionally add an initial set of columns to group by */
+  initialGroupBy?: Array<string | GroupingGetterFunction>;
+
   /** an extra CSS class to add to the sort ascending icon (default undefined), if sortAscIconCssClass is undefined then slick-groupby-sort-asc-icon class will be added */
   sortAscIconCssClass?: string;
 

src/plugins/slick.draggablegrouping.ts

@@ -54,6 +54,7 @@ export class SlickDraggableGrouping {
   protected _droppableInstance?: SortableInstance;
   protected _dropzonePlaceholder!: HTMLDivElement;
   protected _groupToggler?: HTMLDivElement;
+  protected _isInitialized = false;
   protected _options: DraggableGroupingOption;
   protected _defaults: DraggableGroupingOption = {
     dropPlaceHolderText: 'Drop a column header here to group by the column',
@@ -91,6 +92,11 @@ export class SlickDraggableGrouping {
     this._gridColumns = this._grid.getColumns();
     this._dataView = this._grid.getData();
     this._dropzoneElm = this._grid.getTopHeaderPanel() || this._grid.getPreHeaderPanel();
+    if (!this._dropzoneElm) {
+      throw new Error(
+        '[Slickgrid] Draggable Grouping requires the pre-header to be created and shown for the plugin to work correctly (use `createPreHeaderPanel` and `showPreHeaderPanel`).'
+      );
+    }
     this._dropzoneElm.classList.add('slick-dropzone');
 
     const dropPlaceHolderText = this._options.dropPlaceHolderText || 'Drop a column header here to group by the column';
@@ -243,6 +249,12 @@ export class SlickDraggableGrouping {
     this._sortableLeftInstance = Sortable.create(document.querySelector(`.${grid.getUID()} .slick-header-columns.slick-header-columns-left`) as HTMLDivElement, sortableOptions);
     this._sortableRightInstance = Sortable.create(document.querySelector(`.${grid.getUID()} .slick-header-columns.slick-header-columns-right`) as HTMLDivElement, sortableOptions);
 
+    // user can optionally provide initial groupBy columns
+    if (this._options.initialGroupBy && !this._isInitialized) {
+      queueMicrotask(() => this.setDroppedGroups(this._options.initialGroupBy!));
+    }
+    this._isInitialized = true;
+
     return {
       sortableLeftInstance: this._sortableLeftInstance,
       sortableRightInstance: this._sortableRightInstance