Sets or gets the contextMenu property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [layout]="layout" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

interface LayoutLayout {
     type: LayoutType;
     alignment?: LayoutAlignment;
     allowClose?: Boolean;
     allowPin?: Boolean;
     allowUnpin?: Boolean;
     contentContainer?: String;
     height?: String | Number;
     initContent?: () => Void;
     minHeight?: String | Number;
     minWidth?: String | Number;
     orientation?: LayoutOrientation;
     pinnedHeight?: String | Number;
     pinnedWidth?: String | Number;
     selected?: Boolean;
     title?: String | Number;
     unpinnedHeight?: String | Number;
     unpinnedWidth?: String | Number;
     width?: String | Number;
     items?: Array<LayoutLayout>;
}
interface LayoutLayout {
     type: LayoutType;
     alignment?: LayoutAlignment;
     allowClose?: Boolean;
     allowPin?: Boolean;
     allowUnpin?: Boolean;
     contentContainer?: String;
     height?: String | Number;
     initContent?: () => Void;
     minHeight?: String | Number;
     minWidth?: String | Number;
     orientation?: LayoutOrientation;
     pinnedHeight?: String | Number;
     pinnedWidth?: String | Number;
     selected?: Boolean;
     title?: String | Number;
     unpinnedHeight?: String | Number;
     unpinnedWidth?: String | Number;
     width?: String | Number;
     items?: Array<LayoutLayout>;
}
enum LayoutType {
     layoutGroup,
     tabbedGroup,
     documentGroup,
     autoHideGroup,
     layoutPanel,
     documentPanel
}

Sets or gets the layout property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the minGroupHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [layout]="layout" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the minGroupWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [layout]="layout" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the resizable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [layout]="layout" [resizable]="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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [layout]="layout" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [layout]="layout" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}

This event is triggered when the widget is created.

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

Code examples

Bind to the create event of jqxLayout.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout (onCreate)="Create($event)"
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    Create(event: any): void 
    {
        // Do Something
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}



							

						

This event is triggered when a group has been pinned.

Code examples

Bind to the pin event of jqxLayout.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout (onPin)="Pin($event)"
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    Pin(event: any): void 
    {
        // Do Something
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}



							

						

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 jqxLayout.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout (onResize)="Resize($event)"
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    Resize(event: any): void 
    {
        // Do Something
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}



							

						

This event is triggered when a group has been unpinned.

Code examples

Bind to the unpin event of jqxLayout.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout (onUnpin)="Unpin($event)"
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent {
    Unpin(event: any): void 
    {
        // Do Something
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}



							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLayout') myLayout: jqxLayoutComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myLayout.destroy();
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}


							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLayout') myLayout: jqxLayoutComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myLayout.loadLayout(layout);
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}


							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLayout') myLayout: jqxLayoutComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myLayout.refresh();
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}


							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLayout') myLayout: jqxLayoutComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myLayout.render();
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}


							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLayout #myLayout 
            [width]="'100%'" [height]="'90%'" [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>
        </jqxLayout>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLayout') myLayout: jqxLayoutComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myLayout.saveLayout();
    }

    layout: any[] =
    [{
        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'
            }]
        }]
    }];
}