React UI Components Documentation

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600} disabled={true}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the orientation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600} orientation={'horizontal'}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the panels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the resizable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600} resizable={false}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the splitBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600} splitBarSize={10}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showSplitBar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600} showSplitBar={false}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600} theme={'energyblue'}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a panel is collapsed.

Code examples

Bind to the collapsed event of jqxSplitter.

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a panel is expanded.

Code examples

Bind to the expanded event of jqxSplitter.

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the 'resize' operation has ended.

Code examples

Bind to the resize event of jqxSplitter.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySplitter.on('resize', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the 'resizeStart' operation has started.

Code examples

Bind to the resizeStart event of jqxSplitter.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSplitter from 'jqwidgets-react/react_jqxsplitter.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySplitter.on('resizeStart', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxSplitter ref='mySplitter'
                width={850} height={480} panels={[{ size: 300 }]} width={600} height={600}>
                <div className="splitter-panel">
                    Panel 1
                </div>
                <div className="splitter-panel">
                    Panel 2
                </div>
            </JqxSplitter>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));