Properties

NameTypeDefault
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: 
'fixed'
'wrap'
/* 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

NameArgumentsReturn 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);