| Name | Type | Default |
|---|
|
animationType
|
ExpanderAnimationType
|
'slide'
|
ExpanderAnimationType: "none" | "slide" | "fade"
Sets or gets the animation type.
Possible Values:
'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);
|
|
arrowPosition
|
ExpanderArrowPosition
|
'right'
|
ExpanderArrowPosition: "left" | "right"
Sets or gets header's arrow position.
Possible Values:
'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);
|
|
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:
'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);
|
|
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:
'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);
|
|
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);
|
|
|
|
collapsing
|
Event
|
|
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);
|
|
collapsed
|
Event
|
|
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);
|
|
expanding
|
Event
|
|
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);
|
|
expanded
|
Event
|
|
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);
|
|
|
| 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:
- 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);
|
|
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);
|