Merge branch '8.2.x' into set-width-hideallcolumns-82x

Author: kdinev

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

@@ -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) {
     }
 
@@ -65,6 +68,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
     private _recreateView() {
         // detach old and create new
         if (this._viewRef) {
+            this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
             this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
         }
         if (this.igxTemplateOutlet) {
@@ -91,9 +95,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;
@@ -111,6 +117,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
         // if view exists, but template has been changed and there is a view in the cache with the related template
         // then detach old view and insert the stored one with the matching template
         // after that update its context.
+        this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
         this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
         this._viewRef = cachedView;
         const oldContext = this._cloneContext(cachedView.context);

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

@@ -6045,6 +6045,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this.cellSelection !== GridSelectionMode.none;
     }
 
+    /** @hidden */
+    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/grid.component.html

@@ -131,7 +131,8 @@
             <ng-template
                 [igxTemplateOutlet]='isGroupByRecord(rowData) ? group_template : isSummaryRow(rowData) ? summary_template : record_template'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex)'
-                (onCachedViewLoaded)='cachedViewLoaded($event)'>
+                (onCachedViewLoaded)='cachedViewLoaded($event)'
+                (onBeforeViewDetach)='viewDetachHandler($event)' >
             </ng-template>
         </ng-template>
         <ng-container *ngTemplateOutlet="template"></ng-container>

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

@@ -93,7 +93,7 @@
             <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-template #hierarchical_record_template let-rowIndex="index" let-rowData>

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

@@ -4,6 +4,7 @@ import { IRowDragEndEventArgs, IRowDragStartEventArgs } from './grid-base.compon
 import { KEYS } from '../core/utils';
 import { fromEvent, Subscription } from 'rxjs';
 import { IgxRowComponent, IgxGridBaseComponent, IGridDataBindable } from './grid';
+import { IgxHierarchicalRowComponent } from './hierarchical-grid/hierarchical-row.component';
 
 
 const ghostBackgroundClass = 'igx-grid__tr--ghost';
@@ -106,6 +107,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();
@@ -144,6 +154,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/tree-grid/tree-grid.component.html

@@ -95,7 +95,8 @@
 
             <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex)'
-                (onCachedViewLoaded)='cachedViewLoaded($event)'>
+                (onCachedViewLoaded)='cachedViewLoaded($event)'
+                (onBeforeViewDetach)='viewDetachHandler($event)'>
             </ng-template>
         </ng-template>
         <ng-container *ngTemplateOutlet="template"></ng-container>