Merge branch 'sstoychev/add-row-api' of https://github.com/IgniteUI/igniteui-angular into sstoychev/add-row-api

Author: ChronosSF

README.md

@@ -2,7 +2,25 @@
 
 # Current Milestone
 
-## Milestone 17 (Due by August, 2021)
+## Milestone 18 (Due by Oct, 2021)
+
+1. Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675)
+2. Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
+3. Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
+4. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
+5. IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
+
+## Going down the road
+
+1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
+2. Grid Cell Merging
+3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
+4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
+5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
+
+# Previous Milestone
+
+## Milestone 17 (Released August 2nd, 2021)
 
 1.  **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559)
 2. **[DONE]** Expose a column input for passing additional data/state in the template contexts of the column [#9020](https://github.com/IgniteUI/igniteui-angular/issues/9020)
@@ -16,16 +34,6 @@
 10. **[DONE]** Editable cell styling support [#9630](https://github.com/IgniteUI/igniteui-angular/issues/9630)
 11. **[DONE]** Excel Export Service - onColumnExport Allow to modify columnIndex Property [#8874](https://github.com/IgniteUI/igniteui-angular/issues/8874)
 
-## Going down the road
-
-1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
-2. Grid Cell Merging
-3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
-5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
-
-# Previous Milestone
-
 ## Milestone 16 (Released May 14th, 2021)
 
 1. **[DONE]** Themes: Expose elevations as custom CSS props [#8920](https://github.com/IgniteUI/igniteui-angular/issues/8920)

ROADMAP.md

@@ -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/filtering/base/grid-filtering-row.component.ts

@@ -2988,7 +2988,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     };
 
     private transactionChange$ = new Subject<void>();
-
+    private _rendered = false;
     private readonly DRAG_SCROLL_DELTA = 10;
 
     /**
@@ -3673,6 +3673,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));
     }
@@ -4027,16 +4028,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-base.directive.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);
     }
 
     /**

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

@@ -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.html

@@ -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 },