| Name | Type | Default |
|---|---|---|
| animationType | ExpanderAnimationType | 'slide' |
|
ExpanderAnimationType: "none" | "slide" | "fade"
Sets or gets the animation type. Possible Values:/* 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);
|
||
| arrowPosition | ExpanderArrowPosition | 'right' |
|
ExpanderArrowPosition: "left" | "right"
Sets or gets header's arrow position. Possible Values:/* 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);
|
||
| collapseAnimationDuration | number | 400 |
|
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);
|
||
| disabled | boolean | false |
|
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);
|
||
| expanded | boolean | true |
|
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);
|
||
| expandAnimationDuration | number | 400 |
|
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);
|
||
| height | number | string | 'auto' |
|
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);
|
||
| headerPosition | ExpanderHeaderPosition | 'top' |
|
ExpanderHeaderPosition: "top" | "bottom"
Sets or gets header's position. Possible Values:/* 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);
|
||
| initContent | () => void | null |
|
Callback function called when the item's content needs to be initialized. Useful for initializing other widgets within the content of jqxExpander. |
||
| rtl | boolean | false |
|
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);
|
||
| showArrow | boolean | true |
|
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);
|
||
| theme | string | '' |
/* 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);
|
||
| toggleMode | ExpanderToggleMode | 'click' |
|
ExpanderToggleMode: "click" | "dblclick" | "none"
Sets or gets user interaction used for expanding or collapsing the content. Possible Values:/* 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);
|
||
| width | number | string | 'auto' |
|
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);
|
||
Events |
||
| collapsing | Event | |
|
This event is triggered when the jqxExpander is going to be collapsed. Code examples
Bind to the
/* 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);
|
||
| collapsed | Event | |
|
This event is triggered when the jqxExpander is collapsed. Code examples
Bind to the
/* 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);
|
||
| expanding | Event | |
|
This event is triggered when the jqxExpander is going to be expanded. Code examples
Bind to the
/* 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);
|
||
| expanded | Event | |
|
This event is triggered when the jqxExpander is expanded. Code examples
Bind to the
/* 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);
|
||
Methods |
||
| Name | Arguments | Return Type |
| collapse | None | |
|
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);
|
||
| disable | None | |
|
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);
|
||
| destroy | None | |
|
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);
|
||
| enable | None | |
|
This method is enabling the expander. |
||
| expand | None | |
|
Method used for expanding the expander's content. |
||
| focus | None | |
|
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:
/* 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);
|
||
| getContent | None | |
|
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);
|
||
| getHeaderContent | None | |
|
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);
|
||
| invalidate | None | |
|
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);
|
||
| refresh | None | |
|
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);
|
||
| render | None | |
|
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);
|
||
| setHeaderContent | headerContent | |
|
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);
|
||
| setContent | content | |
|
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);
|
||