Angular Panel API Reference

Name	Type	Default
autoUpdate	Boolean	false
Sets or gets the `autoUpdate` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250" [autoUpdate]="true"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250" [disabled]="true"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
height	String \| Number	null
Sets or gets the `height` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
rtl	Boolean	false
Sets or gets the `rtl` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250" [rtl]="true"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
sizeMode	enum:PanelSizeMode	'fixed'
enum PanelSizeMode { fixed, wrap } Sets or gets the `sizeMode` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250" [sizeMode]="'wrap'"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
scrollBarSize	String \| Number	17
Sets or gets the `scrollBarSize` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250" [scrollBarSize]="20"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
theme	String	''
Sets or gets the `theme` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250" [theme]="'energyblue'"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
width	String \| Number	null
Sets or gets the `width` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent { }
Events
Methods
Name	Return Type	Arguments
append	Void	HTMLElement: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.append(document.createElement('div')); } }
clearcontent	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.clearcontent(); } }
destroy	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.destroy(); } }
focus	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.focus(); } }
getScrollHeight	Number	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { let value = this.myPanel.getScrollHeight(); } }
getVScrollPosition	Number	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { let value = this.myPanel.getVScrollPosition(); } }
getScrollWidth	Number	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { let value = this.myPanel.getScrollWidth(); } }
getHScrollPosition	Number	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { let value = this.myPanel.getHScrollPosition(); } }
prepend	Void	HTMLElement: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.prepend(document.createElement('div')); } }
remove	Void	HTMLElement: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.remove(document.querySelector('label')); } }
scrollTo	Void	top: String \| Number, left: String \| Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxPanel #myPanel [width]="350" [height]="250"> <div style="margin: 10px;"> <h3>Early History of the Internet</h3> </div> <div style="white-space: nowrap;"> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> </ul> </div> <div style="margin: 10px;"> <h3>Merging the networks and creating the Internet</h3> </div> <div> <ul> <li>1981 Computer Science Network (CSNET)</li> <li>1982 TCP/IP protocol suite formalized</li> </ul> </div> <div style="margin: 10px;"> <h3>Popular Internet services</h3> </div> <div> <ul> <li>1990 IMDb Internet movie database</li> <li>1995 Amazon.com online retailer</li> </ul> </div> </jqxPanel> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myPanel') myPanel: jqxPanelComponent; ngAfterViewInit(): void { this.myPanel.scrollTo(20,20); } }

Properties

Events

Methods