Properties

NameTypeDefault
contextMenu Boolean false

Sets or gets the contextMenu property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [contextMenu]="true">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
height Size null

Sets or gets the height property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
layout Array<DockingLayoutLayout> []
interface DockingLayoutLayout {
     type: DockingLayoutLayoutType;
     alignment?: DockingLayoutLayoutAlignment;
     allowClose?: Boolean;
     allowPin?: Boolean;
     allowUnpin?: Boolean;
     contentContainer?: String;
     height?: Size;
     initContent?: () => Void;
     minHeight?: Size;
     minWidth?: Size;
     orientation?: DockingLayoutLayoutOrientation;
     pinnedHeight?: Size;
     pinnedWidth?: Size;
     position?: DockingLayoutLayoutPosition;
     selected?: Boolean;
     title?: String;
     unpinnedHeight?: Size;
     unpinnedWidth?: Size;
     width?: Size;
     items?: Array<DockingLayoutLayout>;
}
enum DockingLayoutLayoutType {
     layoutGroup,
     tabbedGroup,
     documentGroup,
     autoHideGroup,
     layoutPanel,
     documentPanel,
     floatGroup
}
interface DockingLayoutLayoutPosition {
     x: Number;
     y: Number;
}
enum DockingLayoutLayoutAlignment {
     left,
     right,
     top,
     bottom
}
interface DockingLayoutLayout {
     type: DockingLayoutLayoutType;
     alignment?: DockingLayoutLayoutAlignment;
     allowClose?: Boolean;
     allowPin?: Boolean;
     allowUnpin?: Boolean;
     contentContainer?: String;
     height?: Size;
     initContent?: () => Void;
     minHeight?: Size;
     minWidth?: Size;
     orientation?: DockingLayoutLayoutOrientation;
     pinnedHeight?: Size;
     pinnedWidth?: Size;
     position?: DockingLayoutLayoutPosition;
     selected?: Boolean;
     title?: String;
     unpinnedHeight?: Size;
     unpinnedWidth?: Size;
     width?: Size;
     items?: Array<DockingLayoutLayout>;
}
enum DockingLayoutLayoutOrientation {
     horizontal,
     vertical
}

Sets or gets the layout property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [layout]="layout">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
minGroupHeight Size 100

Sets or gets the minGroupHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [minGroupHeight]="200">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
minGroupWidth Size 100

Sets or gets the minGroupWidth property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [minGroupWidth]="150">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
resizable Boolean true

Sets or gets the resizable property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [resizable]="false">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [rtl]="true">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600" [theme]="'energyblue'">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}
width Size null

Sets or gets the width property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

Events

create Event

This event is triggered when the widget is created.

Note: The create event binding has to be made before the jqxDockingLayout's initialization.

Code examples

Bind to the create event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onCreate)="Create($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
Create(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

dock Event

This event is triggered when a floatGroup has been docked.

Code examples

Bind to the dock event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onDock)="Dock($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
Dock(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

floatGroupClosed Event

This event is triggered when a floatGroup has been closed.

Code examples

Bind to the floatGroupClosed event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onFloatGroupClosed)="FloatGroupClosed($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
FloatGroupClosed(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

float Event

This event is triggered when a group or panel has been floated.

Code examples

Bind to the float event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onFloat)="Float($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
Float(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

pin Event

This event is triggered when a group has been pinned.

Code examples

Bind to the pin event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onPin)="Pin($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
Pin(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

resize Event

This event is triggered when a group has been resized (when the group has been resized with the mouse or when an adjacent group has been pinned, unpinned or closed).

Code examples

Bind to the resize event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onResize)="Resize($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
Resize(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

unpin Event

This event is triggered when a group has been unpinned.

Code examples

Bind to the unpin event of jqxDockingLayout.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout (onUnpin)="Unpin($event)"
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent {
Unpin(event: any): void
{
// Do Something
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

Methods

NameReturn TypeArguments
addFloatGroup Void width: Size,
height: Size,
position: DockingLayoutLayoutPosition,
panelType: String,
title: String,
content: String,
initContent: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDockingLayout') myDockingLayout: jqxDockingLayoutComponent;
ngAfterViewInit(): void
{
this.myDockingLayout.addFloatGroup(200,200,{x:10, y:10},'layoutPanel','Title','Content');
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

destroy Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDockingLayout') myDockingLayout: jqxDockingLayoutComponent;
ngAfterViewInit(): void
{
this.myDockingLayout.destroy();
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

loadLayout Void layout: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDockingLayout') myDockingLayout: jqxDockingLayoutComponent;
ngAfterViewInit(): void
{
this.myDockingLayout.loadLayout(layout);
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

refresh Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDockingLayout') myDockingLayout: jqxDockingLayoutComponent;
ngAfterViewInit(): void
{
this.myDockingLayout.refresh();
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

render Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDockingLayout') myDockingLayout: jqxDockingLayoutComponent;
ngAfterViewInit(): void
{
this.myDockingLayout.render();
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}

saveLayout Any None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDockingLayout #myDockingLayout
[layout]="layout" [width]="850" [height]="600">
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</jqxDockingLayout>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDockingLayout') myDockingLayout: jqxDockingLayoutComponent;
ngAfterViewInit(): void
{
let value = this.myDockingLayout.saveLayout();
}

layout: any[] = this.generateLayout();
generateLayout(): any[] {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
}