Merge branch 'mkirova/fix-6411-9.0.x' of https://github.com/IgniteUI/igniteui-angular.git

Author: MKirova

ROADMAP.md

@@ -6,21 +6,20 @@
 1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
 2. Theming service for Ignite UI for Angular [#5999](https://github.com/IgniteUI/igniteui-angular/issues/5999)
 3. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-4. igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
+4. **[DONE]** igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
 5. RTL Support across Ignite UI for Angular components [#5958](https://github.com/IgniteUI/igniteui-angular/issues/5958)
-6. Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
-7. Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
+6. **[DONE]** Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
+7. **[DONE]** Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
 8. Angular 9 support [#5998](https://github.com/IgniteUI/igniteui-angular/issues/5998)
-9. Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
-10. Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
+9. **[DONE]** Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
+10. **[DONE]** Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
 
 ## Going down the road
 
 1. Row-pinning
-2. Column Groups expand/collapse, with column grouping templates
-3. Visual Cell merging
-4. Splitter
-5. PDF Integration
+2. Visual Cell merging
+3. Splitter
+4. PDF Integration
 
 # Previous Milestones 
 

package-lock.json

@@ -45,14 +45,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.0-rc.5",
-    "@angular/common": "^9.0.0-rc.5",
-    "@angular/compiler": "^9.0.0-rc.5",
-    "@angular/core": "^9.0.0-rc.5",
-    "@angular/forms": "^9.0.0-rc.5",
-    "@angular/platform-browser": "^9.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.5",
-    "@angular/router": "^9.0.0-rc.5",
+    "@angular/animations": "^9.0.0-rc.7",
+    "@angular/common": "^9.0.0-rc.7",
+    "@angular/compiler": "^9.0.0-rc.7",
+    "@angular/core": "^9.0.0-rc.7",
+    "@angular/forms": "^9.0.0-rc.7",
+    "@angular/platform-browser": "^9.0.0-rc.7",
+    "@angular/platform-browser-dynamic": "^9.0.0-rc.7",
+    "@angular/router": "^9.0.0-rc.7",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -66,12 +66,12 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.5",
-    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.5",
+    "@angular-devkit/build-angular": "~0.900.0-rc.7",
+    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.7",
     "@angular-devkit/schematics": "^7.2.1",
-    "@angular/cli": "~9.0.0-rc.5",
-    "@angular/compiler-cli": "^9.0.0-rc.5",
-    "@angular/language-service": "^9.0.0-rc.5",
+    "@angular/cli": "~9.0.0-rc.7",
+    "@angular/compiler-cli": "^9.0.0-rc.7",
+    "@angular/language-service": "^9.0.0-rc.7",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~3.3.5",
     "@types/jasminewd2": "~2.0.6",

package.json

@@ -32,6 +32,9 @@ export class IgxTemplateOutletDirective implements OnChanges {
     @Output()
     public onCachedViewLoaded = new EventEmitter<ICachedViewLoadedEventArgs>();
 
+    @Output()
+    public onBeforeViewDetach = new EventEmitter<IViewChangeEventArgs>();
+
     constructor(public _viewContainerRef: ViewContainerRef, private _zone: NgZone, public cdr: ChangeDetectorRef) {
     }
 
@@ -66,6 +69,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
         const prevIndex = this._viewRef ? this._viewContainerRef.indexOf(this._viewRef) : -1;
         // detach old and create new
         if (prevIndex !== -1) {
+            this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
             this._viewContainerRef.detach(prevIndex);
         }
         if (this.igxTemplateOutlet) {
@@ -92,9 +96,11 @@ export class IgxTemplateOutletDirective implements OnChanges {
         if (view !== this._viewRef) {
             if (owner._viewContainerRef.indexOf(view) !== -1) {
                 // detach in case view it is attached somewhere else at the moment.
+                this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
                 owner._viewContainerRef.detach(owner._viewContainerRef.indexOf(view));
             }
             if (this._viewRef && this._viewContainerRef.indexOf(this._viewRef) !== -1) {
+                this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
                 this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
             }
             this._viewRef = view;
@@ -113,6 +119,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
         // then detach old view and insert the stored one with the matching template
         // after that update its context.
         if (this._viewContainerRef.length > 0) {
+            this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
             this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
         }
 

projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts

@@ -6012,6 +6012,19 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.cellSelection !== GridSelectionMode.none;
     }
 
+    public viewDetachHandler(args: ICachedViewLoadedEventArgs) {
+        const context = args.view.context;
+        if (context['templateID'] === 'dataRow') {
+            // some browsers (like FireFox and Edge) do not trigger onBlur when the focused element is detached from DOM
+            // hence we need to trigger it manually when cell is detached.
+            const row = this.getRowByIndex(context.index);
+            const focusedCell = row.cells.find(x => x.focused);
+            if (focusedCell) {
+                focusedCell.onBlur();
+            }
+        }
+    }
+
     /**
      * @hidden
      */

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

@@ -19,6 +19,8 @@ import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-fun
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { GridSelectionMode } from '../common/enums';
 import { IgxGridSelectionModule } from '../selection/selection.module';
+import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 
 const DEBOUNCETIME = 30;
 
@@ -1671,6 +1673,38 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.getRowByIndex(1).selected).toBeTruthy();
             expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(6);
         }));
+
+        it('Should select only filtered records', fakeAsync(() => {
+            grid.height = '1100px';
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'UnitsInStock',
+                searchVal: 0,
+                condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+            });
+            tree.filteringOperands.push({
+                fieldName: 'ProductName',
+                searchVal: 'a',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                ignoreCase: true
+            });
+            grid.advancedFilteringExpressionsTree = tree;
+            GridSelectionFunctions.headerCheckboxClick(grid);
+            fix.detectChanges();
+            tick();
+
+            expect(grid.rowList.length).toBe(9);
+            expect(grid.selectedRows().length).toBe(9);
+            GridSelectionFunctions.verifyHeaderRowCheckboxState(grid, true, false);
+
+            grid.advancedFilteringExpressionsTree = null;
+            fix.detectChanges();
+            tick();
+
+            expect(grid.rowList.length).toBe(19);
+            expect(grid.selectedRows().length).toBe(9);
+            GridSelectionFunctions.verifyHeaderRowCheckboxState(grid, false, true);
+        }));
     });
 
     describe('Integration with CRUD and transactions', () => {

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

@@ -122,7 +122,8 @@
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex)'
                 (onCachedViewLoaded)='cachedViewLoaded($event)'
                 (onViewCreated)='viewCreatedHandler($event)'
-                (onViewMoved)='viewMovedHandler($event)'>
+                (onViewMoved)='viewMovedHandler($event)'
+                (onBeforeViewDetach)='viewDetachHandler($event)'>
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -108,7 +108,8 @@
             <ng-template
             [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template))'
             [igxTemplateOutletContext]='getContext(rowData)' (onViewCreated)='viewCreatedHandler($event)'
-            (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)'></ng-template>
+            (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)'
+            (onBeforeViewDetach)='viewDetachHandler($event)'></ng-template>
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
         <ng-container *ngTemplateOutlet="template"></ng-container>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -5,6 +5,7 @@ import { fromEvent, Subscription } from 'rxjs';
 import { IgxRowDirective, IgxGridBaseDirective } from './grid';
 import { IRowDragStartEventArgs, IRowDragEndEventArgs } from './common/events';
 import { GridType } from './common/grid.interface';
+import { IgxHierarchicalRowComponent } from './hierarchical-grid/hierarchical-row.component';
 
 
 const ghostBackgroundClass = 'igx-grid__tr--ghost';
@@ -107,6 +108,15 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
         };
         super.createGhost(pageX, pageY, this.row.nativeElement);
 
+        // check if there is an expander icon and create the ghost at the corresponding position
+        if (this.isHierarchicalGrid) {
+            const row = this.row as IgxHierarchicalRowComponent;
+            if (row.expander) {
+                const expanderWidth = row.expander.nativeElement.getBoundingClientRect().width;
+                this._ghostHostX += expanderWidth;
+            }
+        }
+
         const ghost = this.ghostElement;
 
         const gridRect = this.row.grid.nativeElement.getBoundingClientRect();
@@ -145,6 +155,10 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
         }
         this.endDragging();
     }
+
+    private get isHierarchicalGrid() {
+        return this.row.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
+    }
 }
 
 /**

projects/igniteui-angular/src/lib/grids/row-drag.directive.ts

@@ -1,5 +1,7 @@
 import { Injectable, EventEmitter, NgZone } from '@angular/core';
 import { IGridEditEventArgs } from '../common/events';
+import { IgxGridBaseDirective } from '../grid';
+import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 
 
 export interface GridSelectionRange {
@@ -689,7 +691,9 @@ export class IgxGridSelectionService {
     }
 
     private isFilteringApplied(): boolean {
-        return this.grid.filteringExpressionsTree.filteringOperands.length > 0;
+        const grid = this.grid as IgxGridBaseDirective;
+        return !FilteringExpressionsTree.empty(grid.filteringExpressionsTree) ||
+            !FilteringExpressionsTree.empty(grid.advancedFilteringExpressionsTree);
     }
 
     private isRowDeleted(rowID): boolean {