Merge pull request #9565 from IgniteUI/masenov/fix-9508-master

Make onColumnMovingEnd cancelable
IgniteUI · Jul 19, 2021 · ed6682a · ed6682a
2 parents e74f046 + 93e6fca
commit ed6682a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts
@@ -125,6 +125,7 @@ export interface IColumnMovingEventArgs extends IBaseEventArgs {
 export interface IColumnMovingEndEventArgs extends IBaseEventArgs {
     source: IgxColumnComponent;
     target: IgxColumnComponent;
+    cancel: boolean;
 }
 
 export interface IGridKeydownEventArgs extends IBaseEventArgs {

diff --git a/...iteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/...iteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
@@ -207,7 +207,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                 this.cdr.detectChanges();
             });
             this._columnMoved = this.grid.columnMovingEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.cdr.detectChanges();
+                this.cdr.markForCheck();
             });
         }
     }

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -4304,6 +4304,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     public moveColumn(column: IgxColumnComponent, target: IgxColumnComponent, pos: DropPosition = DropPosition.AfterDropTarget) {
+        // M.A. May 11th, 2021 #9508 Make the event cancelable
+        const eventArgs: IColumnMovingEndEventArgs = { source: column, target, cancel: false };
+
+        this.columnMovingEnd.emit(eventArgs);
+
+        if (eventArgs.cancel) {
+            return;
+        }
 
         if (column === target || (column.level !== target.level) ||
             (column.topLevelParent !== target.topLevelParent)) {
@@ -4339,8 +4347,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this._moveColumns(column, target, pos);
         this._columnsReordered(column);
-
-        this.columnMovingEnd.emit({ source: column, target });
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts
@@ -124,7 +124,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             column.move(2);
 
             columnsList = grid.columnList.toArray();
-            const args = { source: grid.columnList.toArray()[2], target: grid.columnList.toArray()[1] };
+            const args = { source: grid.columnList.toArray()[2], target: grid.columnList.toArray()[1], cancel: false };
             expect(grid.columnMovingEnd.emit).toHaveBeenCalledTimes(1);
             expect(grid.columnMovingEnd.emit).toHaveBeenCalledWith(args);
         });
@@ -456,6 +456,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             expect(fixture.componentInstance.countEnd).toEqual(1);
             expect(fixture.componentInstance.source).toEqual(grid.columnList.toArray()[1]);
             expect(fixture.componentInstance.target).toEqual(grid.columnList.toArray()[0]);
+            expect(fixture.componentInstance.cancel).toBe(false);
         }));
 
         it('Should be able to cancel columnMoving event.', (async () => {
@@ -485,6 +486,35 @@ describe('IgxGrid - Column Moving #grid', () => {
             expect(columnsList[2].field).toEqual('LastName');
         }));
 
+        it('Should be able to cancel columnMovingEnd event.', (async () => {
+            const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+
+            // step 1 - subscribe to the columnMovingEnd event in order to cancel it
+            grid.columnMovingEnd.subscribe((e) => {
+                if (fixture.componentInstance.target.field === 'Name') {
+                    e.cancel = true;
+                }
+            });
+
+            // step 2 - try moving a column
+            const header = headers[0].nativeElement;
+            UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
+            await wait();
+            UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
+            await wait();
+            UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
+            await wait(50);
+            UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);
+            await wait(50);
+            fixture.detectChanges();
+
+            // step 3 - verify the event was canceled(in componentInstance)
+            const columnsList = grid.columnList.toArray();
+            expect(columnsList[0].field).toEqual('ID');
+            expect(columnsList[1].field).toEqual('Name');
+            expect(columnsList[2].field).toEqual('LastName');
+        }));
+
         it('Should preserve filtering after columns are reordered.', async () => {
             pending('This scenario need to be reworked with new Filtering row');
             fixture.componentInstance.isFilterable = true;