chore(demos): fix type errors, add missing functionality in dock manager

src/app/app.component.ts

@@ -287,7 +287,7 @@ export class AppComponent implements OnInit {
             name: 'Grid Auto Size'
         },
         {
-            link: '/gridDocManager',
+            link: '/gridDockManager',
             icon: 'view_column',
             name: 'Grid in DockManager'
         },

src/app/app.routes.ts

@@ -138,7 +138,7 @@ import { GridValidationSampleComponent } from './grid-validation/grid-validation
 import { GridExportComponent } from './grid-export/grid-export.sample';
 import { DividerComponent } from './divider/divider.component';
 import { MonthPickerSampleComponent } from './month-picker/month-picker.sample';
-import { GridDocManagerSampleComponent } from './docmanager-grid/docmanager-grid.sample';
+import { GridDockManagerSampleComponent } from './dockmanager-grid/dockmanager-grid.sample';
 
 export const appRoutes: Routes = [
     {
@@ -603,8 +603,8 @@ export const appRoutes: Routes = [
         component: GridAutoSizeSampleComponent
     },
     {
-        path: 'gridDocManager',
-        component: GridDocManagerSampleComponent
+        path: 'gridDockManager',
+        component: GridDockManagerSampleComponent
     },
     {
         path: 'gridFlex',

src/app/docmanager-grid/docmanager-grid.sample.html → src/app/dockmanager-grid/dockmanager-grid.sample.html

@@ -62,7 +62,7 @@
             </igx-column>
             <igx-column *ngFor="let c of columns" [field]="c.field" [width]="c.width"
                 [sortable]="c.sortable" [filterable]="c.filterable" [dataType]="c.type"
-                [cellClasses]="c.cellClasses" [bodyTemplate]="c.bodyTemplate" [groupable]="c.groupable">
+                [cellClasses]="c.cellClasses" [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
             </igx-column>
         </igx-grid>
     </div>
@@ -94,7 +94,7 @@
             </igx-column>
             <igx-column *ngFor="let c of columns" [field]="c.field" [width]="c.width"
                 [sortable]="c.sortable" [filterable]="c.filterable" [dataType]="c.type"
-                [cellClasses]="c.cellClasses" [bodyTemplate]="c.bodyTemplate" [groupable]="c.groupable">
+                [cellClasses]="c.cellClasses" [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
             </igx-column>
         </igx-grid>
     </div>
@@ -126,7 +126,7 @@
             </igx-column>
             <igx-column *ngFor="let c of columns" [field]="c.field" [width]="c.width"
                 [sortable]="c.sortable" [filterable]="c.filterable" [dataType]="c.type"
-                [cellClasses]="c.cellClasses" [bodyTemplate]="c.bodyTemplate" [groupable]="c.groupable">
+                [cellClasses]="c.cellClasses" [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
             </igx-column>
         </igx-grid>
     </div>
@@ -159,10 +159,12 @@
             </igx-column>
             <igx-column *ngFor="let c of columns" [field]="c.field" [width]="c.width"
                 [sortable]="c.sortable" [filterable]="c.filterable" [dataType]="c.type" [cellClasses]="c.cellClasses"
-                [bodyTemplate]="c.bodyTemplate" [groupable]="c.groupable">
+                [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
             </igx-column>
         </igx-grid>
     </div>
     <ng-template #host gridHost>
     </ng-template>
 </igc-dockmanager>
+
+<div igxOverlayOutlet #filteringOverlayOutlet="overlay-outlet"></div>

src/app/docmanager-grid/docmanager-grid.sample.ts → src/app/dockmanager-grid/dockmanager-grid.sample.ts

@@ -1,28 +1,70 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IGX_BUTTON_GROUP_DIRECTIVES, IGX_GRID_DIRECTIVES, IgxColumnComponent, IgxGridComponent, IgxIconModule, IgxSelectComponent, IgxSelectModule, IgxSwitchModule, OverlaySettings, SortingDirection } from 'igniteui-angular';
-import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IGX_BUTTON_GROUP_DIRECTIVES, IGX_GRID_DIRECTIVES, IgxColumnComponent, IgxGridComponent, IgxIconModule, IgxOverlayOutletDirective, IgxSelectComponent, IgxSelectModule, IgxSwitchModule, OverlaySettings, SortingDirection } from 'igniteui-angular';
+import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
+import { Subject } from 'rxjs';
+import { first, takeUntil } from 'rxjs/operators';
 
-import { SignalRService } from './signal-r.service';
 import { CommonModule, NgFor } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SignalRService } from './signal-r.service';
+
 defineCustomElements();
 
+@Component({
+    selector: 'app-dock-slot',
+    template: `
+    <div style='width: 100%; height: 100%; overflow-x: hidden;'>
+        <ng-container #host></ng-container>
+    </div>`
+})
+export class DockSlotComponent implements AfterViewInit, OnDestroy {
+    @Output()
+    public viewInit = new EventEmitter();
+
+    @ViewChild('host', { read: ViewContainerRef })
+    public host: ViewContainerRef;
+
+    @Input()
+    @HostBinding('attr.slot')
+    public id;
+
+    public destroy$ = new Subject<any>();
+
+    public ngAfterViewInit() {
+        this.viewInit.emit();
+    }
+
+    public ngOnDestroy(): void {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+}
+
 @Component({
     encapsulation: ViewEncapsulation.None,
     providers: [],
     standalone: true,
-    selector: 'app-grid-docmanager-sample',
-    styleUrls: ['docmanager-grid.sample.scss'],
-    templateUrl: 'docmanager-grid.sample.html',
-    imports: [NgFor, IGX_GRID_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, CommonModule, IgxSelectModule, IgxSwitchModule, IgxIconModule ]
+    selector: 'app-grid-dockmanager-sample',
+    styleUrls: ['dockmanager-grid.sample.scss'],
+    templateUrl: 'dockmanager-grid.sample.html',
+    imports: [
+        NgFor,
+        CommonModule,
+        FormsModule,
+        IGX_GRID_DIRECTIVES,
+        IGX_BUTTON_GROUP_DIRECTIVES,
+        IgxSelectModule,
+        IgxSwitchModule,
+        IgxIconModule,
+        IgxOverlayOutletDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-
-export class GridDocManagerSampleComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck {
+export class GridDockManagerSampleComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
     @ViewChild('grid2', { static: true }) public grid2: IgxGridComponent;
-    // @ViewChild(GridHostDirective) public host: GridHostDirective;
+    @ViewChild('host', { read: ViewContainerRef }) public host: ViewContainerRef;
     @ViewChild('dock', { read: ElementRef }) public dockManager: ElementRef<HTMLIgcDockmanagerElement>;
     @ViewChild('priceTemplate', { read: TemplateRef })
     public priceTemplate: TemplateRef<any>;
@@ -120,7 +162,7 @@ export class GridDocManagerSampleComponent implements OnInit, OnDestroy, AfterVi
                     type: GridColumnDataType,
                     groupable?: boolean,
                     cellClasses?: string,
-                    bodyTemplate?: string } [] = [
+                    bodyTemplate?: TemplateRef<any> } [] = [
         { field: 'buy', width: '110px', sortable: false, filterable: false, type: 'currency' },
         { field: 'sell', width: '110px', sortable: false, filterable: false, type: 'currency' },
         { field: 'openPrice', width: '120px', sortable: true, filterable: true, type: 'currency'},
@@ -153,7 +195,7 @@ export class GridDocManagerSampleComponent implements OnInit, OnDestroy, AfterVi
 
     private destroy$ = new Subject<any>();
 
-    constructor(public dataService: SignalRService, private cdr: ChangeDetectorRef, private componentFactoryResolver: ComponentFactoryResolver, private elementRef: ElementRef, private renderer:Renderer2) {}
+    constructor(public dataService: SignalRService, private cdr: ChangeDetectorRef, private elementRef: ElementRef, private renderer:Renderer2) {}
 
     public ngOnInit() {
         this.dataService.startConnection(this.frequency, this.dataVolume, true, false);
@@ -252,13 +294,37 @@ export class GridDocManagerSampleComponent implements OnInit, OnDestroy, AfterVi
     };
 
     public createGrid() {
+        const id: string = 'slot-' + this.slotCounter++;
+        const splitPane: IgcSplitPane = {
+            type: IgcDockManagerPaneType.splitPane,
+            orientation: IgcSplitPaneOrientation.horizontal,
+            floatingWidth: 550,
+            floatingHeight: 350,
+            panes: [
+                {
+                    type: IgcDockManagerPaneType.contentPane,
+                    header: id,
+                    contentId: id
+                }
+            ]
+        };
+        this.dockManager.nativeElement.layout.floatingPanes.push(splitPane);
+        this.docLayout = { ...this.dockManager.nativeElement.layout };
+        this.cdr.detectChanges();
+
+        // Create Dock Slot Component
+        const dockSlotComponent = this.host.createComponent(DockSlotComponent);
+        dockSlotComponent.instance.id = id;
+        dockSlotComponent.instance.viewInit.pipe(first()).subscribe(() => {
+            const gridViewContainerRef = dockSlotComponent.instance.host;
+            this.loadGridComponent(gridViewContainerRef, dockSlotComponent.instance.destroy$);
+        });
     }
 
     public loadGridComponent(viewContainerRef: ViewContainerRef, destructor: Subject<any>) {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(IgxGridComponent);
         viewContainerRef.clear();
 
-        const componentRef = viewContainerRef.createComponent(componentFactory);
+        const componentRef = viewContainerRef.createComponent(IgxGridComponent);
         const grid = (componentRef.instance as IgxGridComponent);
         grid.autoGenerate = true;
         this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d);

src/app/grid-groupby/grid-groupby.sample.ts

@@ -32,7 +32,7 @@ export class GridGroupBySampleComponent implements OnInit {
     public position: GridSummaryPosition = GridSummaryPosition.top;
     public sortingOp: ISortingOptions = { mode: 'multiple' };
 
-    private size = 'medium';
+    protected size = 'medium';
 
     constructor() { }
 

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html

@@ -8,6 +8,6 @@
 
     <button (click)="exportButtonHandler()">Export To Excel</button><br />
 </div>
-<igx-pivot-grid [pivotUI]="{ showRowHeaders: true, rowLayout: 'horizontal' }" [superCompactMode]="true" #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)="dimensionChange()" [defaultExpandState]="true">
+<igx-pivot-grid [pivotUI]="pivotUI" [superCompactMode]="true" #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)="dimensionChange()" [defaultExpandState]="true">
 </igx-pivot-grid>
 

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IgxComboComponent, IgxExcelExporterOptions, IgxExcelExporterService, IgxPivotGridComponent, IgxPivotNumericAggregate, IPivotConfiguration, IPivotDimension } from 'igniteui-angular';
+import { IgxComboComponent, IgxExcelExporterOptions, IgxExcelExporterService, IgxPivotGridComponent, IgxPivotNumericAggregate, IPivotConfiguration, IPivotDimension, IPivotUISettings, PivotRowLayoutType } from 'igniteui-angular';
 import { DATA } from '../shared/pivot-data';
 
 @Component({
@@ -50,6 +50,7 @@ export class PivotGridHierarchySampleComponent {
             enabled: true,
         }
     ];
+    public pivotUI: IPivotUISettings = { showRowHeaders: true, rowLayout: PivotRowLayoutType.Horizontal };
     public selected: IPivotDimension[] = [ this.dimensions[1], this.dimensions[2]];
 
     constructor(private excelExportService: IgxExcelExporterService) {

src/app/radio/radio.sample.html

@@ -3,7 +3,7 @@
         <igx-radio-group #group="igxRadioGroup" [(ngModel)]="initial">
             <div igxLayout>
                 <igx-card class="promotion" layout="justify" *ngFor="let opt of options"
-                    [type]="group.value !== opt ? 'outlined' : 'default'"
+                    [elevated]="group.value === opt"
                     [class.promotion-selected]="group.value === opt">
                     <igx-card-header>
                         <h6 igxCardHeaderTitle>Reserve your dream vacation at {{ opt }}</h6>