Properties

NameTypeDefault
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

NameReturn TypeArguments
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);
    }

    
}