Merge pull request #1049 from ghiscoding/bugfix/draggable-on-group-changed-callback

fix(addons): onGroupChanged callback should be executed with Draggable

Author: ghiscoding

src/app/examples/grid-draggrouping.component.html

@@ -67,9 +67,9 @@ <h2>
         <div class="form-row">
           <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"
+            <div class="form-group col-md-3 grouping-selects"
                  *ngFor="let groupField of selectedGroupingFields; let i = index; trackBy: selectTrackByFn">
-              <select class="form-select" name="groupField{{i}}" [(ngModel)]="selectedGroupingFields[i]"
+              <select class="form-select" name="group-field-{{i}}" [(ngModel)]="selectedGroupingFields[i]"
                       (ngModelChange)="groupByFieldName($event, i)">
                 <option value=""></option>
                 <option [ngValue]="field.id" *ngFor="let field of columnDefinitions">{{field.name}}</option>

test/cypress/e2e/example19.cy.js

@@ -22,6 +22,9 @@ describe('Example 19 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="collapse-all-btn"]').click();
 
+      cy.get('.grouping-selects select:nth(0)').should('have.value', '2: duration');
+      cy.get('.grouping-selects select:nth(1)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
       cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
       cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
 
@@ -45,6 +48,9 @@ describe('Example 19 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
 
     it('should show 1 column title (Duration) shown in the pre-header section', () => {
       cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
+      cy.get('.grouping-selects select:nth(0)').should('have.value', '2: duration');
+      cy.get('.grouping-selects select:nth(1)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
 
     it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be expanded and 3rd row to be a regular row', () => {
@@ -60,9 +66,12 @@ describe('Example 19 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
       cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', '0');
     });
 
-    it('should show 2 column titles (Duration, Effort-Driven) shown in the pre-header section', () => {
+    it('should show 2 column titles (Duration, Effort-Driven) shown in the pre-header section & same select dropdown', () => {
       cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
       cy.get('.slick-dropped-grouping:nth(1) div').contains('Effort-Driven');
+      cy.get('.grouping-selects select:nth(0)').should('have.value', '2: duration');
+      cy.get('.grouping-selects select:nth(1)').should('have.value', '7: effortDriven');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
 
     it('should be able to drag and swap grouped column titles inside the pre-header', () => {
@@ -72,6 +81,9 @@ describe('Example 19 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
 
       cy.get('.slick-dropped-grouping:nth(0) div').contains('Effort-Driven');
       cy.get('.slick-dropped-grouping:nth(1) div').contains('Duration');
+      cy.get('.grouping-selects select:nth(0)').should('have.value', '7: effortDriven');
+      cy.get('.grouping-selects select:nth(1)').should('have.value', '2: duration');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
     });
 
     it('should expect the grouping to be swapped as well in the grid', () => {
@@ -179,5 +191,12 @@ describe('Example 19 - Draggable Grouping & Aggregators', { retries: 1 }, () =>
       cy.get('.right-footer')
         .contains('500 of 500 items');
     });
+
+    it('should clear all grouping and expect all select dropdown to be cleared too', () => {
+      cy.get('[data-test="clear-grouping-btn"]').click();
+      cy.get('.grouping-selects select:nth(0)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(1)').should('not.have.value');
+      cy.get('.grouping-selects select:nth(2)').should('not.have.value');
+    });
   });
 });