Angular Docking API Reference

Name	Type	Default
cookies	Boolean	false
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 { }
cookieOptions	DockingCookieOptions	{}
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 { }
disabled	Boolean	false
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 { }
floatingWindowOpacity	Number	0.3
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 { }
height	Size	auto
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 { }
keyboardNavigation	Boolean	false
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 { }
mode	enum:DockingMode	default
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 { }
orientation	enum:DockingOrientation	horizontal
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 { }
rtl	Boolean	false
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 { }
theme	String	''
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 { }
width	Size	auto
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 { }
windowsMode	DockingWindowsMode	null
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 { }
windowsOffset	Number	5
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 { }
Events
dragStart	Event
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 } }
dragEnd	Event
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 } }
Methods
Name	Return Type	Arguments
addWindow	Void	windowId: String, mode: Any, panel: Number, position: Any
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(); } }
closeWindow	Void	windowId: String
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(); } }
collapseWindow	Void	windowId: String
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(); } }
destroy	Void	None
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(); } }
disableWindowResize	Void	windowId: String
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(); } }
disable	Void	None
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(); } }
exportLayout	String	None
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(); } }
enable	Void	None
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(); } }
expandWindow	Void	windowId: String
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(); } }
enableWindowResize	Void	windowId: String
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(); } }
focus	Void	None
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(); } }
hideAllCloseButtons	Void	None
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(); } }
hideAllCollapseButtons	Void	None
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(); } }
hideCollapseButton	Void	windowId: String
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(); } }
hideCloseButton	Void	windowId: String
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(); } }
importLayout	Void	Json: String
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(); } }
move	Void	windowId: String, panel: Number, position: Number
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(); } }
pinWindow	Void	windowId: String
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(); } }
setWindowMode	Void	windowId: String, mode: Any
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(); } }
showCloseButton	Void	windowId: String
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(); } }
showCollapseButton	Void	windowId: String
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(); } }
setWindowPosition	Void	windowId: String, top: Any, left: Number
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(); } }
showAllCloseButtons	Void	None
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(); } }
showAllCollapseButtons	Void	None
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(); } }
unpinWindow	Void	windowId: String
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(); } }

Properties

Events

Code examples

Code examples

Methods