Merge pull request #7850 from IgniteUI/ibarakov/fix-7379-10.0.x

feat(grid): create a setter for grid's outlet #7379

Author: DiyanDimitrov

Diff for: CHANGELOG.md

@@ -43,6 +43,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxSelect` support for `igxHint` directive added.
     - Allows the user to add `igxHint` to be displayed bellow the input element.
 
+## 9.1.9
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Expose a setter for grid's `outlet` property, which can be used to set the outlet used to attach the grid's overlays to.
+
 ## 9.1.4
 
 ### New Features

Diff for: projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -24,7 +24,7 @@
             [igxFocus]="true" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
             [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
         </igx-date-picker>
     </ng-container>

Diff for: projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -30,7 +30,7 @@ export interface GridType extends IGridDataBindable {
     selectionService: any;
     navigation: any;
     filteringService: any;
-    outletDirective: any;
+    outlet: any;
 
     calcHeight: number;
 

Diff for: projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -184,7 +184,7 @@ <h6 class="igx-filter-empty__title">
                                  mode="dropdown"
                                  [(ngModel)]="searchValue"
                                  [locale]="grid.locale"
-                                 [outlet]="grid.outletDirective">
+                                 [outlet]="grid.outlet">
                     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
                         <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'">
                             <input #searchValueInput

Diff for: projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -46,7 +46,7 @@
         tabindex="0"
         mode="dropdown"
         [value]="value"
-        [outlet]="filteringService.grid.outletDirective"
+        [outlet]="filteringService.grid.outlet"
         [locale]="filteringService.grid.locale"
         (onSelection)="onDateSelected($event)"
         (onClosed)="datePickerClose()">

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

@@ -147,8 +147,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) { }
 
     ngAfterViewInit() {
-        this._conditionsOverlaySettings.outlet = this.column.grid.outletDirective;
-        this._operatorsOverlaySettings.outlet = this.column.grid.outletDirective;
+        this._conditionsOverlaySettings.outlet = this.column.grid.outlet;
+        this._operatorsOverlaySettings.outlet = this.column.grid.outlet;
 
         const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
         if (selectedItem) {

Diff for: projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -14,7 +14,7 @@
     </igx-select-item>
 </igx-select>
 
-<igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outletDirective">
+<igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outlet">
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
         <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity">
             <input #input

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

@@ -210,6 +210,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         positionStrategy: new ConnectedPositioningStrategy(this._advancedFilteringPositionSettings),
     };
 
+    protected _userOutletDirective: IgxOverlayOutletDirective;
+
     /**
      * @hidden @internal
      */
@@ -1797,20 +1799,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @ViewChild('tfoot', { static: true })
     public tfoot: ElementRef;
 
-
     /**
      * @hidden @internal
      */
     @ViewChild('igxFilteringOverlayOutlet', { read: IgxOverlayOutletDirective, static: true })
     protected _outletDirective: IgxOverlayOutletDirective;
 
-    /**
-     * @hidden @internal
-     */
-    public get outletDirective() {
-        return this._outletDirective;
-    }
-
     /**
      * @hidden @internal
      */
@@ -1835,7 +1829,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public get parentRowOutletDirective() {
-        return this.outletDirective;
+        return this.outlet;
     }
 
     /**
@@ -2918,7 +2912,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 return;
             }
 
-            if (this.overlayService.getOverlayById(event.id)?.settings?.outlet === this.outletDirective &&
+            if (this.overlayService.getOverlayById(event.id)?.settings?.outlet === this.outlet &&
                 this.overlayIDs.indexOf(event.id) < 0) {
                 this.overlayIDs.push(event.id);
             }
@@ -3363,10 +3357,23 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * @hidden @internal
+     * Gets the outlet used to attach the grid's overlays to.
+     * @remark
+     * If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.
+     */
+    get outlet() {
+        return this.resolveOutlet();
+    }
+
+    protected resolveOutlet() {
+        return this._userOutletDirective ? this._userOutletDirective : this._outletDirective;
+    }
+
+    /**
+     * Sets the outlet used to attach the grid's overlays to.
      */
-    protected get outlet() {
-        return this.outletDirective;
+    set outlet(val: any) {
+        this._userOutletDirective = val;
     }
 
     /**
@@ -6493,7 +6500,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!this._advancedFilteringOverlayId) {
             this._advancedFilteringOverlaySettings.positionStrategy.settings.target =
                 (this as any).rootGrid ? (this as any).rootGrid.nativeElement : this.nativeElement;
-            this._advancedFilteringOverlaySettings.outlet = this.outletDirective;
+            this._advancedFilteringOverlaySettings.outlet = this.outlet;
 
             this._advancedFilteringOverlayId = this.overlayService.attach(
                 IgxAdvancedFilteringDialogComponent,

Diff for: projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

@@ -23,7 +23,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
         [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
     </igx-date-picker>
     </ng-container>

Diff for: projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -14,7 +14,7 @@
                 [column]="child"
                 [gridID]="child.grid.id"
                 [igxColumnMovingDrag]="child"
-                [ghostHost]="grid.outletDirective.nativeElement"
+                [ghostHost]="grid.outlet.nativeElement"
                 [attr.droppable]="true"
                 [igxColumnMovingDrop]="child">
             </igx-grid-header-group>
@@ -48,7 +48,7 @@
             'igx-grid__th--selected': selected,
             'igx-grid__th--active': activeGroup}"
         [igxColumnMovingDrag]="column"
-        [ghostHost]="grid.outletDirective.nativeElement"
+        [ghostHost]="grid.outlet.nativeElement"
         [attr.droppable]="true"
         [igxColumnMovingDrop]="column"
         (pointerdown)="activate()"
@@ -81,7 +81,7 @@
 
 <ng-container *ngIf="!column.columnGroup">
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>
-    <igx-grid-header [igxColumnMovingDrag]="column" [ghostHost]="grid.outletDirective.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [igxColumnMovingDrop]="column" [gridID]="column.grid.id" [column]="column"></igx-grid-header>
+    <igx-grid-header [igxColumnMovingDrag]="column" [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [igxColumnMovingDrop]="column" [gridID]="column.grid.id" [column]="column"></igx-grid-header>
     <igx-grid-filtering-cell *ngIf="grid.allowFiltering && grid.filterMode == 'quickFilter'" [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
     <span *ngIf="!column.columnGroup && column.resizable" class="igx-grid__th-resize-handle"
         [igxResizeHandle]="column"

Diff for: projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts

@@ -70,10 +70,19 @@ export class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
     }
 
     /**
-     * @hidden
+     * Gets the outlet used to attach the grid's overlays to.
+     * @remark
+     * If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.
+     */
+    get outlet() {
+        return this.rootGrid ? this.rootGrid.resolveOutlet() : this.resolveOutlet();
+    }
+
+    /**
+     * Sets the outlet used to attach the grid's overlays to.
      */
-    protected get outlet() {
-        return this.rootGrid ? this.rootGrid.outletDirective : this.outletDirective;
+    set outlet(val: any) {
+        this._userOutletDirective = val;
     }
 
     /**

Diff for: projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts

@@ -302,7 +302,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      */
     public exportClicked() {
         this._overlaySettings.positionStrategy.settings.target = this.exportButton.nativeElement;
-        this._overlaySettings.outlet = this.grid.outletDirective;
+        this._overlaySettings.outlet = this.grid.outlet;
         this.exportDropdown.toggle(this._overlaySettings);
     }
 
@@ -351,7 +351,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      */
     public toggleColumnHidingUI() {
         this._overlaySettings.positionStrategy.settings.target = this.columnHidingButton.nativeElement;
-        this._overlaySettings.outlet = this.grid.outletDirective;
+        this._overlaySettings.outlet = this.grid.outlet;
         this.columnHidingDropdown.toggle(this._overlaySettings);
     }
 
@@ -363,7 +363,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      */
     public toggleColumnPinningUI() {
         this._overlaySettings.positionStrategy.settings.target = this.columnPinningButton.nativeElement;
-        this._overlaySettings.outlet = this.grid.outletDirective;
+        this._overlaySettings.outlet = this.grid.outlet;
         this.columnPinningDropdown.toggle(this._overlaySettings);
     }
 

Diff for: projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -23,7 +23,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
         [locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
     </igx-date-picker>
     </ng-container>

Diff for: src/app/grid-column-selection/grid-column-selection.sample.ts

@@ -120,7 +120,7 @@ export class GridColumnSelectionSampleComponent implements OnInit {
 
     public toggleColumnSelection() {
         this._overlaySettings.positionStrategy.settings.target = this.columnSelectionButton.nativeElement;
-        this._overlaySettings.outlet = this.grid1.outletDirective;
+        this._overlaySettings.outlet = this.grid1.outlet;
         this.columnSelectionDropdown.toggle(this._overlaySettings);
     }