fix(row-adding): splitting to two methods, fixing pinning #9675

Author: ChronosSF

Diff for: CHANGELOG.md

@@ -2,15 +2,18 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-
-## 12.1.5
+## 12.1.6
 
 ### New Features
 - `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.
+    - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other specifying the index at which to spawn it. 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
+    this.grid.beginAddRowById('ALFKI');         // spawns the add row UI under the row with PK 'ALFKI'
+    this.grid.beginAddRowById('ALFKI', true);   // spawns the add row UI to add a child for the row with PK 'ALFKI'
+    this.grid.beginAddRowById(null);            // spawns the add row UI as the first record
+    this.grid.beginAddRowByIndex(10);           // spawns the add row UI at index 10
+    this.grid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 9
+    this.grid.beginAddRowByIndex(0);            // spawns the add row UI as the first record
     ```
 
 ## 12.1.3

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

@@ -437,8 +437,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
      */
     public createAddRowParent(row: IgxRowDirective<IgxGridBaseDirective & GridType>, newRowAsChild?: boolean) {
         const rowIndex = row ? row.index : -1;
-        const rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null);
-
+        const rowId = row ? row.rowID : null;
         const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
         const pinIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowId);
         const unpinIndex = this.grid.getUnpinnedIndexById(rowId);

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

@@ -156,6 +156,7 @@ import { IgxPaginatorComponent } from '../paginator/paginator.component';
 import { IgxGridHeaderRowComponent } from './headers/grid-header-row.component';
 import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '../services/transaction/transaction-factory.service';
+import { SSL_OP_NO_SESSION_RESUMPTION_ON_RENEGOTIATION } from 'constants';
 
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
@@ -5967,42 +5968,48 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Enters add mode for the specified rowID (primary key if one is defined, index otherwise)
+     * Enters add mode by spawning the UI under the specified row by rowID.
      *
      * @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);
+     * this.grid.beginAddRowById('ALFKI');
+     * this.grid.beginAddRowById('ALFKI', true);
+     * this.grid.beginAddRowById(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 rowID - The rowID 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 {
+    public beginAddRowById(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) {
+        } else {
             // 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.');
+                console.warn('No row with the specified ID was found.');
                 return;
             }
         }
+        if (!this.dataView.length) {
+            this.beginAddRowForIndex(rowID, asChild);
+            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) {
+            if ((index < this.virtualizationState.startIndex ||
+                index >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize) &&
+                !this.isRecordPinnedByViewIndex(index)) {
                 this.verticalScrollContainer.chunkLoad
                     .pipe(first(), takeUntil(this.destroy$))
                     .subscribe(() => {
@@ -6018,6 +6025,30 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Enters add mode by spawning the UI at the specified index.
+     *
+     * @remarks
+     * Accepted values for index are integers from 0 to this.grid.dataView.length
+     * @remarks
+     * When adding the row as a child, the parent row is the one at the previous index. You cannot add a child at index 0.
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowByIndex(10);
+     * this.grid.beginAddRowByIndex(10, true);
+     * this.grid.beginAddRowByIndex(0);
+     * ```
+     * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
+     * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
+     */
+    public beginAddRowByIndex(index: number, asChild?: boolean): void {
+        if (index === 0) {
+            return this.beginAddRowById(null, asChild);
+        }
+        const record = this.dataView[index - 1];
+        return this.beginAddRowById(this.primaryKey ? record[this.primaryKey] : record, asChild);
+    }
+
     protected beginAddRowForIndex(index: number, asChild: boolean = false) {
         const row: IgxRowDirective<IgxGridBaseDirective & GridType> = index == null ?
             null : this.rowList.find(r => r.index === index);

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

@@ -491,7 +491,7 @@ describe('IgxGrid - Row Adding #grid', () => {
             await wait(DEBOUNCETIME);
             fixture.detectChanges();
 
-            grid.beginAddRow(null);
+            grid.beginAddRowById(null);
 
             await wait(DEBOUNCETIME);
             fixture.detectChanges();
@@ -503,7 +503,7 @@ describe('IgxGrid - Row Adding #grid', () => {
             await wait(DEBOUNCETIME);
             fixture.detectChanges();
 
-            grid.beginAddRow('FAMIA');
+            grid.beginAddRowById('FAMIA');
 
             await wait(DEBOUNCETIME);
             fixture.detectChanges();

Diff for: src/app/grid-add-row/grid-add-row.sample.html

@@ -49,6 +49,11 @@ <h1 igxCardHeaderTitle>Settings</h1>
                 <label igxLabel for="index">Index</label>
             </igx-input-group>
             <button igxButton="raised" (click)="beginAddRowStart()">Add Row At Start</button>
+            <igx-input-group>
+                <input igxInput name="string" type="string" #stringInput value="CENTC"/>
+                <label igxLabel for="string">PK</label>
+            </igx-input-group>
+            <button igxButton="raised" (click)="beginAddRowById(stringInput.value)">Add Row For ID</button>
         </igx-card-content>
     </igx-card>
 </div>

Diff for: src/app/grid-add-row/grid-add-row.sample.ts

@@ -77,11 +77,14 @@ export class GridAddRowSampleComponent implements OnInit {
 
     public beginAddRowAtIndex(index: string) {
         const numeric = parseInt(index, 10);
-        const PK = this.grid.dataView[numeric]['ID'];
-        this.grid.beginAddRow(PK);
+        this.grid.beginAddRowByIndex(numeric);
     }
 
     public beginAddRowStart() {
-        this.grid.beginAddRow(null);
+        this.grid.beginAddRowById(null);
+    }
+
+    public beginAddRowById(string: string) {
+        this.grid.beginAddRowById(string);
     }
 }