React UI Components Documentation

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the arrowPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the collapseAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} collapseAnimationDuration={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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the expanded property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the expandAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} expandAnimationDuration={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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the headerPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the initContent property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} initContent={initContent}>
                <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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showArrow property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} showArrow={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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} theme={'energyblue'}>
                <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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the toggleMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} toggleMode={'none'}>
                <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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxExpander ref='myExpander'
                width={350} 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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the collapsing event of jqxExpander.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.on('collapsing', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the jqxExpander is collapsed.

Code examples

Bind to the collapsed event of jqxExpander.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.on('collapsed', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the expanding event of jqxExpander.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.on('expanding', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the jqxExpander is expanded.

Code examples

Bind to the expanded event of jqxExpander.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.on('expanded', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.collapse();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.disable();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.destroy();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.enable();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.expand();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.focus();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myExpander.getContent();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myExpander.getHeaderContent();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.invalidate();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.refresh();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.render();
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.setHeaderContent('header');
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxExpander from 'jqwidgets-react/react_jqxexpander.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myExpander.setContent('content');
    }

    render() {             
        return (
            <JqxExpander ref='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>
                    </ul>
                </div>
            </JqxExpander>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));