Sets or gets the cookies property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [cookies]="true">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

interface DockingCookieOptions {
     domain?: String;
     expires?: Number;
}

Sets or gets the cookieOptions property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [cookies]="true" [cookieOptions]='{ domain: 'jqwidgets.com', expires: 90 }'>
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [disabled]="true">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the floatingWindowOpacity property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [floatingWindowOpacity]="0.4">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [height]="300">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the keyboardNavigation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [keyboardNavigation]="true">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

enum DockingMode {
     default,
     docked,
     floating
}

Sets or gets the mode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [mode]="'docked'">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

enum DockingOrientation {
     horizontal,
     vertical
}

Sets or gets the orientation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [orientation]="'horizontal'">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [rtl]="true">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [theme]="'energyblue'">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [width]="300">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

interface DockingWindowsMode {
     windowID: DockingMode;
}

Sets or gets the windowsMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [windowsMode]='{ 'window0': 'floating', 'window1': 'docked' }'>
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

Sets or gets the windowsOffset property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking  [windowsOffset]="7">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the user start to drag any window.

Code examples

Bind to the dragStart event of jqxDocking.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking (onDragStart)="DragStart($event)">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    DragStart(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user drop any window.

Code examples

Bind to the dragEnd event of jqxDocking.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking (onDragEnd)="DragEnd($event)">
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent {
    DragEnd(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.addWindow();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.closeWindow();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.collapseWindow();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.disableWindowResize();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myDocking.exportLayout();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.expandWindow();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.enableWindowResize();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.hideAllCloseButtons();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.hideAllCollapseButtons();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.hideCollapseButton();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.hideCloseButton();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.importLayout();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.move();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.pinWindow();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.setWindowMode();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.showCloseButton();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.showCollapseButton();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.setWindowPosition();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.showAllCloseButtons();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.showAllCollapseButtons();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDocking #myDocking >
            <div>
                <div id="window0" style="height: 150px">
                    <div>CISC</div>
                    <div>
                        Before the RISC philosophy became prominent.....
                    </div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>Database management system</div>
                    <div>
                        A database management system (DBMS) is a software...
                    </div>
                </div>
            </div>
            <div>
                <div id="window2" style="height: 150px">
                    <div>RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs....
                    </div>
                </div>
            </div>
        </jqxDocking>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDocking') myDocking: jqxDockingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDocking.unpinWindow();
    }

    
}