fix(pivot-grid): added createRow method for grid based events (#15209)

Author: tishko0

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -14,16 +14,16 @@ import { IgxGridToolbarComponent } from "../../../igniteui-angular/src/lib/grids
 import { IgxToolbarToken } from "../../../igniteui-angular/src/lib/grids/toolbar/token";
 import { IgxColumnComponent } from "../../../igniteui-angular/src/lib/grids/columns/column.component";
 import { IgxColumnGroupComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-group.component";
+import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
+import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
+import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
+import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";
 import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component";
 import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
 import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
 import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
 import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
 import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
-import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
-import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
-import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
-import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";
 import { IgxGridStateComponent } from "../lib/state.component";
 
 export const registerComponents = [

projects/igniteui-angular/src/lib/grids/grid-public-row.ts

@@ -6,6 +6,8 @@ import { IgxSummaryResult } from './summaries/grid-summary';
 import { ITreeGridRecord } from './tree-grid/tree-grid.interfaces';
 import { mergeWith } from 'lodash-es';
 import { CellType, GridServiceType, GridType, IGridValidationState, RowType, ValidationStatus } from './common/grid.interface';
+import { IgxPivotGridComponent }  from './pivot-grid/public_api';
+import { PivotUtil } from './pivot-grid/pivot-util';
 
 abstract class BaseRow implements RowType {
     public index: number;
@@ -791,3 +793,71 @@ export class IgxSummaryRow implements RowType {
         return row;
     }
 }
+
+export class IgxPivotGridRow implements RowType {
+
+    /** The index of the row within the grid */
+    public index: number;
+
+    /**
+     * The grid that contains the row.
+     */
+    public grid: IgxPivotGridComponent;
+    private _data?: any;
+
+    constructor(grid: IgxPivotGridComponent, index: number, data?: any) {
+        this.grid = grid;
+        this.index = index;
+        this._data = data && data.addRow && data.recordRef ? data.recordRef : data;
+    }
+
+    /**
+     *  The data passed to the row component.
+     */
+    public get data(): any {
+        return this._data ?? this.grid.dataView[this.index];
+    }
+
+    /**
+     * Returns the view index calculated per the grid page.
+     */
+    public get viewIndex(): number {
+        return this.index + this.grid.page * this.grid.perPage;
+    }
+
+    /**
+     * Gets the row key.
+     * A row in the grid is identified either by:
+     * - primaryKey data value,
+     * - the whole rowData, if the primaryKey is omitted.
+     *
+     * ```typescript
+     * let rowKey = row.key;
+     * ```
+     */
+    public get key(): any {
+        const dimension = this.grid.visibleRowDimensions[this.grid.visibleRowDimensions.length - 1];
+        const recordKey =  PivotUtil.getRecordKey(this.data, dimension);
+        return recordKey ? recordKey : null;
+    }
+
+    /**
+     * Gets whether the row is selected.
+     * Default value is `false`.
+     * ```typescript
+     * row.selected = true;
+     * ```
+     */
+    public get selected(): boolean {
+        return this.grid.selectionService.isRowSelected(this.key);
+    }
+
+    public set selected(val: boolean) {
+        if (val) {
+            this.grid.selectionService.selectRowsWithNoEvent([this.key]);
+        } else {
+            this.grid.selectionService.deselectRowsWithNoEvent([this.key]);
+        }
+        this.grid.cdr.markForCheck();
+    }
+}

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

@@ -102,6 +102,7 @@ import { IgxTextHighlightService } from '../../directives/text-highlight/text-hi
 import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
 import { IgxPivotDateDimension } from './pivot-grid-dimensions';
 import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component';
+import { IgxPivotGridRow } from '../grid-public-row';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -2520,4 +2521,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.regroupTrigger++;
         }
     }
+
+    /**
+     * @hidden @internal
+     */
+     public createRow(index: number, data?: any): RowType {
+        let row: RowType;
+
+        const dataIndex = this._getDataViewIndex(index);
+        const rec = data ?? this.dataView[dataIndex];
+
+
+        if (!row && rec) {
+            row = new IgxPivotGridRow(this, index, rec);
+        }
+        return row;
+    }
 }

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

@@ -1,7 +1,7 @@
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxIconComponent, IgxPivotGridComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { CellType, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IGridCellEventArgs, IgxIconComponent, IgxPivotGridComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 import { IgxChipComponent } from '../../chips/chip.component';
 import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
 import { DefaultPivotSortingStrategy } from '../../data-operations/pivot-sort-strategy';
@@ -22,6 +22,7 @@ import { Size } from '../common/enums';
 import { setElementSize } from '../../test-utils/helper-utils.spec';
 import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component';
 import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
+import { IgxGridCellComponent } from '../cell.component';
 
 const CSS_CLASS_LIST = 'igx-drop-down__list';
 const CSS_CLASS_ITEM = 'igx-drop-down__item';
@@ -2104,8 +2105,23 @@ describe('IgxPivotGrid #pivotGrid', () => {
 
                 expect(pivotGrid.rowList.length).toBe(10);
             });
-        });
 
+            it('should have the correct IGridCellEventArgs when clicking on a cell', () => {
+                const pivotGrid = fixture.componentInstance.pivotGrid;
+                spyOn(pivotGrid.cellClick, 'emit').and.callThrough();
+                fixture.detectChanges();
+
+                const cell = pivotGrid.gridAPI.get_cell_by_index(0, 'Bulgaria-UnitsSold') as CellType;
+
+                pivotGrid.cellClick.emit({ cell, event: null });
+                cell.nativeElement.click();
+                const cellClickargs: IGridCellEventArgs = { cell, event: new MouseEvent('click') };
+
+                const gridCell = cellClickargs.cell as  IgxGridCellComponent;
+                const firstEntry = gridCell.rowData.aggregationValues.entries().next().value;
+                expect(firstEntry).toEqual(['USA-UnitsSold', 829]);
+            });
+        });
     });
 
     describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {