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 }}