| Name | Type | Default |
|---|---|---|
| autoUpdate | boolean | false |
|
Automatically updates the panel, if its children size is changed. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250} autoUpdate={true}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disabled | boolean | false |
|
Sets or gets whether the panel is disabled. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250} disabled={true}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | null |
|
Sets or gets the panel's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| rtl | boolean | false |
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250} rtl={true}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| sizeMode | PanelSizeMode | 'fixed' |
|
PanelSizeMode: "fixed" | "wrap"
Sets or gets the sizing mode. In the 'fixed' mode, the panel displays scrollbars, if its content requires it. In the wrap mode, the scrollbars are not displayed and the panel automatically changes its size. Possible Values:/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250} sizeMode={'wrap'}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| scrollBarSize | number | string | 17 |
|
Sets or gets the scrollbar's size. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250} scrollBarSize={20}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| theme | string | '' |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250} theme={'material'}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | null |
|
Sets or gets the panel's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
Methods |
||
| Name | Arguments | Return Type |
| append | HTMLElement | |
|
Appends an element to the panel's content. |
||
| clearcontent | None | |
|
Clears the panel's content. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.clearcontent();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| destroy | None | |
|
Destroys the widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.destroy();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| focus | None | |
|
Focuses the widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.focus();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getScrollHeight | None | |
|
Get the scrollable height. Returns a number. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.getScrollHeight();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getVScrollPosition | None | |
|
Get the vertical scrollbar's position. Returns a number. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.getVScrollPosition();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getScrollWidth | None | |
|
Get the scrollable width. Returns a number. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.getScrollWidth();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getHScrollPosition | None | |
|
Get the horizontal scrollbar's position. Returns a number. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.getHScrollPosition();
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| prepend | HTMLElement | |
|
Prepends an element to the panel's content. |
||
| remove | HTMLElement | |
|
Remove an element from the panel's content. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.remove(document.querySelector('li'));
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| scrollTo | left, top | |
|
Scroll to specific position. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPanel, { IPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
class App extends React.PureComponent<{}, IPanelProps> {
private myPanel = React.createRef<JqxPanel>();
public componentDidMount(): void {
this.myPanel.current!.scrollTo(0,20);
}
public render() {
return (
<JqxPanel ref={this.myPanel}
width={250} height={250}>
<div style='margin: 10px;'>
<h3>Early History of the Internet</h3>
</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
</ul>
</div>
</JqxPanel>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||