Angular UI Components Documentation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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