feat(add-row): implementing context-free beginAddRow method #9675

Author: ChronosSF

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.0.0
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - Added a public method that spawns the add row UI for an arbitrary record in the current data view. It accepts a rowID (PK when one is defined, index otherwise). You can also pass `null` to spawn the UI as the very first record. Please, note that the new record is still added at the end of the data view, after the end-user submits it.
+    ```typescript
+    this.grid.beginAddRow('ALFKI'); // spawns the add row UI under the row with PK 'ALFKI'
+    this.grid.beginAddRow(null);    // spawns the add row UI as the first record
+    ```
+
 ## 12.1.2
 - `igxGrid`
     - The column formatter callback signature now accepts the row data as an additional argument:
@@ -53,7 +61,7 @@ All notable changes for each version of this project will be documented in this
         - `IgxGridCellComponent`,  `IgxTreeGridCellComponent`, `IgxHierarchicalGridCellComponent` are no longer exposed in the public API. Instead, a new class `IgxGridCell` replaces all of these. It is a facade class which exposes only the public API of the above mentioned. Automatic migration will change these imports with `CellType`, which is the interface implemented by `IgxGridCell`
     - **Behavioral changes**
     - `getCellByKey`, `getCellByColumn`, `getCellByColumnVisibleIndex`, `row.cells`, `column.cells`, `grid.selectedCells` now return an `IgxGridCell` the `CellType` interface.
-    - `cell` in `IGridCellEventArgs` is now `CellType`. `IGridCellEventArgs` are emitetd in `cellClick`, `selected`, `contextMenu` and `doubleClick` events.
+    - `cell` in `IGridCellEventArgs` is now `CellType`. `IGridCellEventArgs` are emitted in `cellClick`, `selected`, `contextMenu` and `doubleClick` events.
     - `let-cell` property in cell template is now `CellType`.
     - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead.
 

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -393,6 +393,14 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         return this.grid.primaryKey ? this.getRowData(rowID) : rowID;
     }
 
+    /**
+     * Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
+     * @param pk
+     */
+    public get_rec_index_by_id(pk: string | number): number {
+        return this.grid.primaryKey ? this.grid.dataView.findIndex(rec => rec[this.grid.primaryKey] === pk) : -1;
+    }
+
     public allow_expansion_state_change(rowID, expanded) {
         return this.grid.expansionStates.get(rowID) !== expanded;
     }

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -436,7 +436,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
      * @hidden @internal
      */
     public createAddRowParent(row: IgxRowDirective<IgxGridBaseDirective & GridType>, newRowAsChild?: boolean) {
-        const rowIndex = row ? row.index : this.grid.rowList.length - 1;
+        const rowIndex = row ? row.index : -1;
         const rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null);
 
         const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
@@ -580,6 +580,7 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
         this.grid.navigateTo(this.row.index, -1);
         const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index);
         dummyRow.triggerAddAnimation();
+        dummyRow.cdr.detectChanges();
         dummyRow.addAnimationEnd.pipe(first()).subscribe(() => {
             const cell = dummyRow.cells.find(c => c.editable);
             if (cell) {

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

@@ -5927,6 +5927,68 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(commit, event);
     }
 
+    /**
+     * Enters add mode for the specified rowID (primary key if one is defined, index otherwise)
+     *
+     * @remarks
+     * If null is passed as rowID, the row adding UI is spawned as the first record in the data view
+     * @remarks
+     * Spawning the UI to add a child for a record only works if you provide a rowID
+     * @example
+     * ```typescript
+     * this.grid.beginAddRow('ALFKI');
+     * this.grid.beginAddRow(null);
+     * ```
+     * @param rowID - The PK or index to spawn the add row UI for, or null to spawn it as the first record in the data view
+     * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
+     */
+    public beginAddRow(rowID: any, asChild?: boolean): void {
+        let index = rowID;
+        if (rowID == null) {
+            if (asChild) {
+                console.warn("The record cannot be added as a child to an unspecified record.");
+                return;
+            }
+            index = 0;
+        } else if (this.primaryKey !== null) {
+            // find the index of the record with that PK
+            index = this.gridAPI.get_rec_index_by_id(rowID);
+            rowID = index;
+            if (index == -1) {
+                console.warn("No row with the specified PK was found.");
+                return;
+            } 
+        }
+        // check if the index is valid - won't support anything outside the data view
+        if (index >= 0 && index < this.dataView.length) {
+            // check if the index is in the view port
+            if (index < this.virtualizationState.startIndex ||
+                index >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize) {
+                this.verticalScrollContainer.chunkLoad
+                    .pipe(first(), takeUntil(this.destroy$))
+                    .subscribe(() => {
+                        this.beginAddRowForIndex(rowID, asChild);
+                    });
+                this.navigateTo(index);
+                this.notifyChanges(true);
+                return;
+            }
+            this.beginAddRowForIndex(rowID, asChild);
+        } else {
+            console.warn("The row with the specified PK or index is outside of the current data view.");
+        }
+    }
+
+    protected beginAddRowForIndex(index: number, asChild: boolean = false) {
+        const row: IgxRowDirective<IgxGridBaseDirective & GridType> = index == null ?
+            null : this.rowList.find(r => r.index === index);
+        if (row !== undefined) {
+            this.crudService.enterAddRowMode(row, asChild);
+        } else {
+            console.warn("No row with the specified PK or index was found.");
+        }
+    }
+
     protected switchTransactionService(val: boolean) {
         if (val) {
             this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);

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

@@ -1,6 +1,6 @@
 import { IgxGridModule, IgxGridComponent } from './public_api';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TestBed, fakeAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DebugElement } from '@angular/core';
 import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
@@ -22,6 +22,8 @@ import { IgxGridRowComponent } from './grid-row.component';
 import { takeUntil, first } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
+const DEBOUNCETIME = 30;
+
 describe('IgxGrid - Row Adding #grid', () => {
         const GRID_ROW = 'igx-grid-row';
         const DISPLAY_CONTAINER = 'igx-display-container';
@@ -479,6 +481,35 @@ describe('IgxGrid - Row Adding #grid', () => {
 
             expect(grid.gridAPI.get_row_by_index(1).addRowUI).toBeTrue();
         });
+
+        it('Should scroll and start adding a row as the first one when using the public API method', async () => {
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            grid.navigateTo(20, 0);
+            
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            grid.beginAddRow(null);
+
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            expect(grid.gridAPI.get_row_by_index(0).addRowUI).toBeTrue();
+        });
+
+        xit('Should scroll and start adding a row as for a row that is not in view', async () => {
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            grid.beginAddRow('FAMIA');
+
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            expect(grid.gridAPI.get_row_by_index(8).addRowUI).toBeTrue();
+        });
     });
 
     describe('Exit add row mode tests', () => {

src/app/grid-add-row/grid-add-row.sample.html

@@ -43,6 +43,12 @@ <h1 igxCardHeaderTitle>Settings</h1>
             <igx-select [(ngModel)]="perPage">
                 <igx-select-item *ngFor="let value of selectOptions" [value]="value">{{value}}</igx-select-item>
             </igx-select>
+            <button igxButton="raised" (click)="beginAddRowAtIndex(indexInput.value)">Add Row At Index</button>
+            <igx-input-group>
+                <input igxInput name="index" type="number" #indexInput/>
+                <label igxLabel for="index">Index</label>
+            </igx-input-group>
+            <button igxButton="raised" (click)="beginAddRowStart()">Add Row At Start</button>
         </igx-card-content>
     </igx-card>
 </div>

src/app/grid-add-row/grid-add-row.sample.ts

@@ -1,11 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IgxGridComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-grid-add-row',
     styleUrls: ['grid-add-row.sample.scss'],
     templateUrl: `grid-add-row.sample.html`
 })
 export class GridAddRowSampleComponent implements OnInit {
+
+    @ViewChild(IgxGridComponent)
+    public grid: IgxGridComponent;
+
     public data: any[];
     public dataFull: any[];
     public columns: any[];
@@ -69,4 +74,14 @@ export class GridAddRowSampleComponent implements OnInit {
         this.data = [];
         /* eslint-enable max-len */
     }
+
+    public beginAddRowAtIndex(index: string) {
+        const numeric = parseInt(index, 10);
+        const PK = this.grid.dataView[numeric]['ID'];
+        this.grid.beginAddRow(PK);
+    }
+
+    public beginAddRowStart() {
+        this.grid.beginAddRow(null);
+    }
 }