React UI Components Documentation

Sets or gets the animation type.

'slide'

'fade'

'none'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} animationType={'fade'}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets header's arrow position.

'left'

'right'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} arrowPosition={'left'}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the collapsing animation duration.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} collapseAnimationDuration={3000}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the expander is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} disabled={true}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets expander's state (collapsed or expanded).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} expanded={false}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the expanding animation duration.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} expandAnimationDuration={3000}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets expander's height. Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} height={100}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets header's position.

'top'

'bottom'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} headerPosition={'bottom'}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function called when the item's content needs to be initialized. Useful for initializing other widgets within the content of jqxExpander.

Determines whether the right-to-left support is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} rtl={true}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether header's arrow is going to be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} showArrow={false}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} theme={'material'}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets user interaction used for expanding or collapsing the content.

'click'

'dblclick'

'none'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350} toggleMode={'dblclick'}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets expander's width.Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={300}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the jqxExpander is going to be collapsed.

Code examples

Bind to the collapsing event of jqxExpander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} onCollapsing={this.onCollapsing} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
 
  private onCollapsing(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the jqxExpander is collapsed.

Code examples

Bind to the collapsed event of jqxExpander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} onCollapsed={this.onCollapsed} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
 
  private onCollapsed(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the jqxExpander is going to be expanded.

Code examples

Bind to the expanding event of jqxExpander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} onExpanding={this.onExpanding} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
 
  private onExpanding(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the jqxExpander is expanded.

Code examples

Bind to the expanded event of jqxExpander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();  
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} onExpanded={this.onExpanded} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
 
  private onExpanded(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method which is collapsing the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.collapse();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method is disabling the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method destroys the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method is enabling the expander.

Method used for expanding the expander's content.

This method focuses on the expander. When the widget is focused, keyboard navigation can be used. Here is a list of the keys, supported by jqxExpander and their function:

• Enter/Spacebar - if the focus is on the header, collapses or expands the widget.
• Tab - focuses on the header or the next element in the DOM.
• Ctrl+Up arrow - if the focus is on the content, focuses on the header.
• Ctrl+Down arrow - if the focus is on the header, focuses on the content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Getting expander's content. Returns a string with the content's HTML.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.getContent();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Getting expander's header content. Returns a string with the header's HTML.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.getHeaderContent();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method refreshes the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.invalidate();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method refreshes the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method renders the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.render();
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method is setting specific content to the expander's header.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.setHeaderContent('New Header');
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This method is setting specific content to the expander.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxExpander, { IExpanderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxexpander';
 
class App extends React.PureComponent<{}, IExpanderProps> {
  private myExpander = React.createRef<JqxExpander>();
 
  public componentDidMount(): void {
    this.myExpander.current!.setContent('New Awesome Content!');
  }
   
  
  public render() {
    return (
      <JqxExpander ref={this.myExpander} 
        width={350}>
        <div>Early History of the Internet</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>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
      </JqxExpander>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);