Merge remote-tracking branch 'origin/12.1.x' into sstoychev/add-row-api-12.1

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -209,7 +209,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
             this.cdr.markForCheck();
         });
 
-        this.focusEditElement();
+        requestAnimationFrame(() => this.focusEditElement());
     }
 
     public get disabled(): boolean {

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

@@ -2987,7 +2987,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     };
 
     private transactionChange$ = new Subject<void>();
-
+    private _rendered = false;
     private readonly DRAG_SCROLL_DELTA = 10;
 
     /**
@@ -3672,6 +3672,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 this.paginator.totalRecords = this.totalRecords;
                 this.paginator.overlaySettings = { outlet: this.outlet };
             }
+            this._rendered = true;
         });
         Promise.resolve().then(() => this.rendered.next(true));
     }
@@ -4026,16 +4027,24 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.featureColumnsWidth();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public get columns(): IgxColumnComponent[] {
+        return this._columns;
+    }
+
     /**
      * Gets an array of `IgxColumnComponent`s.
      *
      * @example
      * ```typescript
-     * const colums = this.grid.columns.
+     * const colums = this.grid.columnsCollection.
      * ```
      */
-    public get columns(): IgxColumnComponent[] {
-        return this._columns;
+    public get columnsCollection(): IgxColumnComponent[] {
+        return this._rendered ?  this._columns : [];
     }
 
     /**

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

@@ -282,7 +282,8 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
      * @hidden @internal
      */
     public get selectedRowsInTheGroup(): any[] {
-        return this.groupRow.records.filter(rowID => this.gridSelection.filteredSelectedRowIds.indexOf(this.getRowID(rowID)) > -1);
+        const selectedIds = this.gridSelection.filteredSelectedRowIds;
+        return this.groupRow.records.filter(rowID => selectedIds.indexOf(this.getRowID(rowID)) > -1);
     }
 
     /**

src/app/grid-groupby/grid-groupby.sample.html

@@ -65,3 +65,14 @@
 
     <button igxButton="raised" (click)="hideGroupableRow()">Show/Hide groupable row</button>
 </div>
+
+<div class="wrapper">
+    <h3>Selection Performance</h3>
+    <igx-grid [data]="data2" [allowFiltering]="true" cellSelection="none" width="1200px"
+    height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr">
+        <igx-column field="STATUS" header="Status" width="200px" [groupable]="true" [sortable]="true">
+        </igx-column>
+        <igx-column field="FIELD" header="Field" width="200px" [groupable]="true" [sortable]="true">
+        </igx-column>
+    </igx-grid>
+</div>

src/app/grid-groupby/grid-groupby.sample.ts

@@ -17,10 +17,12 @@ export class GridGroupBySampleComponent implements OnInit {
     private grid1: IgxGridComponent;
 
     public data: Array<any>;
+    public data2: any[] = [];
     public hideGroupedColumns = false;
     public expState = [];
     public columns: Array<any>;
     public groupingExpressions: Array<ISortingExpression>;
+    public perfGrpExpr = [ { fieldName: 'FIELD', dir: SortingDirection.Asc } ];
     public summaryMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootLevelOnly;
     public summaryModes = [];
     public selectionModes: any[];
@@ -31,6 +33,13 @@ export class GridGroupBySampleComponent implements OnInit {
     constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { }
 
     public ngOnInit(): void {
+        for (let i = 0; i < 60; i++) {
+            this.data2.push(...Array(10).fill({ STATUS: 'A', FIELD: 'some text' }));
+            this.data2.push(...Array(10).fill({ STATUS: 'B', FIELD: 'some text' }));
+            this.data2.push(...Array(10).fill({ STATUS: 'C', FIELD: 'some text' }));
+            this.data2.push(...Array(10).fill({ STATUS: 'D', FIELD: 'some text' }));
+        }
+        this.data2 = this.data2.map((rec, index) => ({...rec, ID: index}));
         this.columns = [
             { dataType: 'string', field: 'ID', width: 100, hidden: true },
             { dataType: 'string', field: 'CompanyName', width: 300, groupable: true },