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

Author: onlyexeption

CHANGELOG.md

@@ -94,6 +94,12 @@ The following example shows how you can use the Indigo theme:
 - `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

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>

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;
 

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

@@ -182,7 +182,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

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

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

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) {

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

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

@@ -208,6 +208,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         positionStrategy: new ConnectedPositioningStrategy(this._advancedFilteringPositionSettings),
     };
 
+    protected _userOutletDirective: IgxOverlayOutletDirective;
+
     /**
      * @hidden @internal
      */
@@ -1816,20 +1818,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
      */
@@ -1854,7 +1848,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public get parentRowOutletDirective() {
-        return this.outletDirective;
+        return this.outlet;
     }
 
     /**
@@ -2946,7 +2940,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);
             }
@@ -3384,10 +3378,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;
     }
 
     /**
@@ -6509,7 +6516,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,

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>

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"