Merge pull request #4122 from IgniteUI/mkirova/fix-4095

fix(HierarchicalGrid): Handle various overlay scenarios in Hierarchic…
IgniteUI · Mar 1, 2019 · 1e665c9 · 1e665c9
2 parents 5cea946 + 85a6465
commit 1e665c9
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 11 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -1614,7 +1614,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     @ViewChild('igxFilteringOverlayOutlet', { read: IgxOverlayOutletDirective })
-    public outletDirective: IgxOverlayOutletDirective;
+    protected _outletDirective: IgxOverlayOutletDirective;
+
+    /**
+     * @hidden
+     */
+    public get outletDirective() {
+        return this._outletDirective;
+    }
 
     /**
      * @hidden
@@ -2335,7 +2342,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             }
             this.disableTransitions = false;
         });
-
         if (this.allowFiltering && this.filterMode === FilterMode.excelStyleFilter) {
             this.closeExcelStyleDialog();
         }
@@ -2350,7 +2356,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             this.cdr.detectChanges();
             this.parentVirtDir.onChunkLoad.emit(this.headerContainer.state);
         });
-
         if (this.allowFiltering && this.filterMode === FilterMode.excelStyleFilter) {
             this.closeExcelStyleDialog();
         }
@@ -4594,7 +4599,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             this.nativeElement.focus();
         } */
 
-    private changeRowEditingOverlayStateOnScroll(row: IgxRowComponent<IgxGridBaseComponent & IGridDataBindable>) {
+    protected changeRowEditingOverlayStateOnScroll(row: IgxRowComponent<IgxGridBaseComponent & IGridDataBindable>) {
         if (!this.rowEditable || this.rowEditingOverlay.collapsed) {
             return;
         }

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -79,7 +79,7 @@
             </igx-hierarchical-grid-row>
         </ng-template>
         <ng-template #child_record_template let-rowIndex="index" let-rowData>
-            <div style="overflow:auto;width: 100%;" [attr.data-rowindex]='rowIndex' [ngClass]="{
+            <div style="overflow:auto;width: 100%;" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()' [ngClass]="{
                 'igx-grid__tr-container': true,
                 'igx-grid__tr--highlighted':isRowHighlighted(rowData)
             }">

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -34,7 +34,7 @@ import { IgxHierarchicalSelectionAPIService } from './selection';
 import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxHierarchicalGridBaseComponent } from './hierarchical-grid-base.component';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, filter } from 'rxjs/operators';
 import { IgxTemplateOutletDirective } from '../../directives/template-outlet/template_outlet.directive';
 import { IgxOverlayService } from '../../services/index';
 
@@ -59,6 +59,7 @@ export interface HierarchicalStateRecord {
 })
 export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseComponent
     implements IGridDataBindable, AfterViewInit, AfterContentInit, OnInit {
+    private _overlayIDs = [];
     /**
      * Sets the value of the `id` attribute. If not provided it will be automatically generated.
      * ```html
@@ -303,6 +304,17 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         this.hgridAPI.register(this);
         this._transactions = this.parentIsland ? this.parentIsland.transactions : this._transactions;
         super.ngOnInit();
+        this.overlayService.onOpened.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            if (this.overlayService.getOverlayById(event.id).settings.outlet === this.outletDirective) {
+                this._overlayIDs.push(event.id);
+            }
+        });
+        this.overlayService.onClosed.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            const ind = this._overlayIDs.indexOf(event.id);
+            if (ind !== -1) {
+                this._overlayIDs.splice(ind, 1);
+            }
+        });
     }
 
     /**
@@ -353,6 +365,10 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
             this.toolbarCustomContentTemplates;
     }
 
+    public get outletDirective() {
+        return this.rootGrid._outletDirective;
+    }
+
     /**
      * @hidden
      */
@@ -588,9 +604,27 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
 
     private hg_verticalScrollHandler(event) {
         this.scrollTop = event.target.scrollTop;
+        this.hideOverlays();
+    }
+
+    public onContainerScroll() {
+        this.hideOverlays();
     }
 
     private hg_horizontalScrollHandler(event) {
         this.scrollLeft = event.target.scrollLeft;
+        this.hideOverlays();
+    }
+
+    private hideOverlays() {
+        this._overlayIDs.forEach(overlayID => {
+            this.overlayService.hide(overlayID);
+            // blur in case some editor somewhere decides to move focus back
+            this.overlayService.onClosed.pipe(
+                filter(o => o.id === overlayID),
+                takeUntil(this.destroy$)).subscribe(() => {
+                    this.nativeElement.focus();
+                });
+        });
     }
 }
diff --git a/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html b/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html
@@ -11,11 +11,12 @@
                 <igx-column field="ContactTitle"></igx-column>
                 <igx-column field="Country"></igx-column>
                 <igx-column field="Phone"></igx-column>
-                <igx-row-island #rowIsland1 [key]="'Orders'" [height]="'400px'" [primaryKey]="'OrderID'" [autoGenerate]="false"
+                <igx-row-island #rowIsland1 [key]="'Orders'" [height]="'400px'" [primaryKey]="'MyID'" [autoGenerate]="false"
                         [rowSelectable]='isRowSelectable' (onGridCreated)="gridCreated($event, rowIsland1)"
                         [rowEditable]="true">
+                        <igx-column field="MyID"></igx-column>
                         <igx-column field="OrderID"></igx-column>
-                        <igx-column field="OrderDate"></igx-column>
+                        <igx-column field="OrderDate" [dataType]='"date"'></igx-column>
                         <igx-column field="ShipCountry"></igx-column>
                         <igx-column field="ShipCity"></igx-column>
                         <igx-column field="ShipAddress"></igx-column>
@@ -28,4 +29,4 @@
                         </igx-row-island>
                 </igx-row-island>
         </igx-hierarchical-grid>
-</div>
+</div>
diff --git a/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.ts b/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.ts
@@ -70,6 +70,14 @@ export class HierarchicalGridUpdatingSampleComponent implements AfterViewInit {
 
     gridCreated(event: IGridCreatedEventArgs, rowIsland: IgxRowIslandComponent) {
         this.remoteService.getData({ parentID: event.parentID, level: rowIsland.level, key: rowIsland.key }, (data) => {
+            if (rowIsland.key === 'Orders') {
+                let index = 0;
+                data['value'].forEach(item => {
+                    item.OrderDate = new Date(item.OrderDate);
+                    item.MyID = index;
+                    index++;
+                });
+            }
             event.grid.data = data['value'];
             event.grid.cdr.detectChanges();
         });

diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html
@@ -3,15 +3,15 @@ <h4 class="sample-title">Sample One</h4>
     <div class="density-chooser" style="margin-bottom: 16px">
         <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
     </div>
-    <igx-hierarchical-grid class="hgrid" #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true'  [paging]="true"
+    <igx-hierarchical-grid class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true'  [paging]="true"
         [height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded" #hGrid>
         <igx-column field="ID" [pinned]="true" [filterable]='true'></igx-column>
         <igx-column-group header="Information">
             <igx-column field="ChildLevels"  [groupable]='true'></igx-column>
             <igx-column field="ProductName" hasSummary='true'></igx-column>
         </igx-column-group>
 
-        <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
+        <igx-row-island [key]="'childData'" [autoGenerate]="false" [allowFiltering]='true' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
                 <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
                 <igx-column-group header="Information2">
                     <igx-column field="ChildLevels"  [groupable]='true'></igx-column>