feat(grid): make contextMenu fire on row area without cells (#13487) (#…

…14087)

* feat(grid): make contextMenu fire on row area without cells

* docs(changelog): changing the changelog to better explain the new change

---------

Co-authored-by: IMinchev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

CHANGELOG.md

@@ -30,6 +30,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Enhanced the advanced filtering to emit the `filtering` event when filters are applied.
 
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - The `contextMenu` event now fires when the end-user clicks to the right of the right-most cell in the grid in case the grid's columns don't span its full width. For this reason the event argument of the event is now of type `IGridContextMenuEventArgs` which contains the row object as well as the cell one. The latter will be `null` if the event didn't originate from a cell. **This is not a breaking change** as the new type extends the old.
+
 ## 17.1.0
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/grids/README.md

@@ -238,7 +238,7 @@ A list of the events emitted by the **igx-grid**:
 |`dataPreLoad`| Emitted when a new chunk of data is loaded from virtualization. |
 |`columnPin`|Emitted when a column is pinned or unpinned through the grid API. The index that the column is inserted at may be changed through the `insertAtIndex` property. Use `isPinned` to check whether the column is pinned or unpinned.|
 |`columnResized`|Emitted when a column is resized. Returns the column object, previous and new column width.|
-|`contextMenu`|Emitted when a cell is right clicked. Returns the cell object.|
+|`contextMenu`|Emitted when a cell or row is right clicked. Returns the cell or row object.|
 |`doubleClick`|Emitted when a cell is double clicked. Returns the cell object.|
 |`columnVisibilityChanged`| Emitted when `IgxColumnComponent` visibility is changed. Args: { column: any, newValue: boolean } |
 |`groupingDone`|Emitted when the grouping state changes as a result of grouping columns, ungrouping columns or a combination of both. Provides an array of `ISortingExpression`, an array of the **newly** grouped columns as `IgxColumnComponent` references and an array of the **newly** ungrouped columns as `IgxColumnComponent` references.|

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -834,18 +834,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
         });
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @HostListener('contextmenu', ['$event'])
-    public onContextMenu(event: MouseEvent) {
-        this.grid.contextMenu.emit({
-            cell: this.getCellType(),
-            event
-        });
-    }
-
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -41,6 +41,9 @@ export interface IGridRowEventArgs extends IBaseEventArgs {
     event: Event;
 }
 
+/** Represents an event argument for the grid contextMenu output */
+export interface IGridContextMenuEventArgs extends IGridCellEventArgs, IGridRowEventArgs {}
+
 /** Represents event arguments related to grid editing completion. */
 export interface IGridEditDoneEventArgs extends IBaseEventArgs {
     /**

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -7,7 +7,8 @@ import {
     IColumnMovingEventArgs, IPinColumnEventArgs,
     IActiveNodeChangeEventArgs,
     ICellPosition, IFilteringEventArgs, IColumnResizeEventArgs, IRowToggleEventArgs, IGridToolbarExportEventArgs, IPinRowEventArgs,
-    IGridRowEventArgs, IGridEditEventArgs, IRowDataCancelableEventArgs, IGridEditDoneEventArgs
+    IGridRowEventArgs, IGridEditEventArgs, IRowDataCancelableEventArgs, IGridEditDoneEventArgs,
+    IGridContextMenuEventArgs
 } from '../common/events';
 import { DisplayDensity, IDensityChangedEventArgs } from '../../core/density';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
@@ -1028,7 +1029,7 @@ export interface GridType extends IGridDataBindable {
     cellClick: EventEmitter<IGridCellEventArgs>;
     rowClick: EventEmitter<IGridRowEventArgs>;
     doubleClick: EventEmitter<IGridCellEventArgs>;
-    contextMenu: EventEmitter<IGridCellEventArgs>;
+    contextMenu: EventEmitter<IGridContextMenuEventArgs>;
     selected: EventEmitter<IGridCellEventArgs>;
     rangeSelected: EventEmitter<GridSelectionRange>;
     rowSelectionChanging: EventEmitter<IRowSelectionEventArgs>;

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -121,7 +121,8 @@ import {
     IGridEditEventArgs,
     IRowDataCancelableEventArgs,
     IGridEditDoneEventArgs,
-    IGridRowEventArgs
+    IGridRowEventArgs,
+    IGridContextMenuEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
 import {
@@ -836,16 +837,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public columnResized = new EventEmitter<IColumnResizeEventArgs>();
 
     /**
-     * Emitted when a cell is right clicked.
+     * Emitted when a cell or row is right clicked.
      *
      * @remarks
-     * Returns the `IgxGridCell` object.
+     * Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise.
      * ```html
      * <igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @Output()
-    public contextMenu = new EventEmitter<IGridCellEventArgs>();
+    public contextMenu = new EventEmitter<IGridContextMenuEventArgs>();
 
     /**
      * Emitted when a cell is double clicked.

projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts

@@ -124,16 +124,15 @@ describe('IgxGrid - Cell component #grid', () => {
 
         it('Should trigger contextMenu event when right click into cell', () => {
             spyOn(grid.contextMenu, 'emit').and.callThrough();
-            const event = new Event('contextmenu');
+            const event = new Event('contextmenu', { bubbles: true });
             cellElem.nativeElement.dispatchEvent(event);
-            const args: IGridCellEventArgs = {
-                cell: grid.getCellByColumn(0, 'ID'),
-                event
-            };
 
             fix.detectChanges();
             expect(grid.contextMenu.emit).toHaveBeenCalledTimes(1);
-            expect(grid.contextMenu.emit).toHaveBeenCalledWith(args);
+            expect(grid.contextMenu.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+                cell: jasmine.anything(),
+                row: jasmine.anything()
+            }));
         });
 
         it('Should trigger doubleClick event when double click into cell', () => {

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -2083,7 +2083,35 @@ describe('IgxGrid Component Tests #grid', () => {
             fix.detectChanges();
             expect(grid.rowClick.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowClick.emit).toHaveBeenCalledWith(args);
-        })
+        });
+
+        it('Should emit contextMenu when clicking outside of the columns area', () => {
+            const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
+            fix.componentInstance.initColumnsRows(5, 5);
+            //fix.componentInstance.columns.forEach(c => c.width = '100px');
+            fix.componentInstance.grid.width = '900px';
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+            grid.columnList.forEach(c => c.width = '100px');
+            fix.detectChanges();
+            const spy = spyOn(grid.contextMenu, 'emit').and.callThrough();
+            const event = new Event('contextmenu', { bubbles: true });
+            const row = grid.rowList.get(0);
+            const cell = row.cells.get(0);
+            cell.nativeElement.dispatchEvent(event);
+            fix.detectChanges();
+            expect(grid.contextMenu.emit).toHaveBeenCalledTimes(1);
+            expect(grid.contextMenu.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+                cell: jasmine.anything()
+            }));
+            spy.calls.reset();
+            row.nativeElement.dispatchEvent(event);
+            fix.detectChanges();
+            expect(grid.contextMenu.emit).toHaveBeenCalledTimes(1);
+            expect(grid.contextMenu.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+                row: jasmine.anything()
+            }));
+        });
 
         it(`Verify that getRowData returns correct data`, () => {
             const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -411,6 +411,20 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('contextmenu', ['$event'])
+    public onContextMenu(event: MouseEvent) {
+        const cell = (event.target as HTMLElement).closest('.igx-grid__td');
+        this.grid.contextMenu.emit({
+            row: this,
+            cell: this.cells.find(c => c.nativeElement === cell),
+            event
+        });
+    }
+
     /**
      * @hidden
      * @internal