diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0edd7c91731..8d00f4ce6c4 100644
--- a/src/app/app.component.ts
+++ b/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'
},
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 4262b53a858..02bdb21336a 100644
--- a/src/app/app.routes.ts
+++ b/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',
diff --git a/src/app/docmanager-grid/docmanager-grid.sample.html b/src/app/dockmanager-grid/dockmanager-grid.sample.html
similarity index 96%
rename from src/app/docmanager-grid/docmanager-grid.sample.html
rename to src/app/dockmanager-grid/dockmanager-grid.sample.html
index 48c024685a1..f7c02a61278 100644
--- a/src/app/docmanager-grid/docmanager-grid.sample.html
+++ b/src/app/dockmanager-grid/dockmanager-grid.sample.html
@@ -62,7 +62,7 @@
+ [cellClasses]="c.cellClasses" [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
@@ -94,7 +94,7 @@
+ [cellClasses]="c.cellClasses" [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
@@ -126,7 +126,7 @@
+ [cellClasses]="c.cellClasses" [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
@@ -159,10 +159,12 @@
+ [cellTemplate]="c.bodyTemplate" [groupable]="c.groupable">
+
+
diff --git a/src/app/docmanager-grid/docmanager-grid.sample.scss b/src/app/dockmanager-grid/dockmanager-grid.sample.scss
similarity index 100%
rename from src/app/docmanager-grid/docmanager-grid.sample.scss
rename to src/app/dockmanager-grid/dockmanager-grid.sample.scss
diff --git a/src/app/docmanager-grid/docmanager-grid.sample.ts b/src/app/dockmanager-grid/dockmanager-grid.sample.ts
similarity index 79%
rename from src/app/docmanager-grid/docmanager-grid.sample.ts
rename to src/app/dockmanager-grid/dockmanager-grid.sample.ts
index 6af692c7b5b..7620719dabc 100644
--- a/src/app/docmanager-grid/docmanager-grid.sample.ts
+++ b/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: `
+
+
+
`
+})
+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();
+
+ 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;
@ViewChild('priceTemplate', { read: TemplateRef })
public priceTemplate: TemplateRef;
@@ -120,7 +162,7 @@ export class GridDocManagerSampleComponent implements OnInit, OnDestroy, AfterVi
type: GridColumnDataType,
groupable?: boolean,
cellClasses?: string,
- bodyTemplate?: string } [] = [
+ bodyTemplate?: TemplateRef } [] = [
{ 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();
- 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) {
- 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);
diff --git a/src/app/docmanager-grid/signal-r.service.ts b/src/app/dockmanager-grid/signal-r.service.ts
similarity index 100%
rename from src/app/docmanager-grid/signal-r.service.ts
rename to src/app/dockmanager-grid/signal-r.service.ts
diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts
index 589cb74e219..3d6e750da98 100644
--- a/src/app/grid-groupby/grid-groupby.sample.ts
+++ b/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() { }
diff --git a/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html b/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html
index 187c8111c2b..3ff0776d5a4 100644
--- a/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html
+++ b/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html
@@ -8,6 +8,6 @@
-
+
diff --git a/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.ts b/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.ts
index b427981b67c..db0f3a2642e 100644
--- a/src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.ts
+++ b/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) {
diff --git a/src/app/radio/radio.sample.html b/src/app/radio/radio.sample.html
index 9365822dcb9..391cf5260a9 100644
--- a/src/app/radio/radio.sample.html
+++ b/src/app/radio/radio.sample.html
@@ -3,7 +3,7 @@
Reserve your dream vacation at {{ opt }}