React UI Components Documentation

Sets or gets the autoUpdate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250} autoUpdate={true}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250} disabled={true}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250} rtl={true}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the sizeMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250} sizeMode={'wrap'}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250} scrollBarSize={20}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250} theme={'energyblue'}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPanel.append(document.createElement('div'));
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPanel.clearcontent();
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myPanel.getScrollHeight();
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myPanel.getVScrollPosition();
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myPanel.getScrollWidth();
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myPanel.getHScrollPosition();
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPanel.prepend(document.createElement('div'));
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPanel.remove(document.querySelector('label'));
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPanel from 'jqwidgets-react/react_jqxpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPanel.scrollTo(20,20);
    }

    render() {       
        
        return (
            <JqxPanel ref='myPanel'
                width={350} height={250}>
                <div style="margin: 10px;">
                    <h3>Early History of the Internet</h3>
                </div>
                <div style="white-space: nowrap;">
                    <ul>
                        <li>1961 First packet-switching papers</li>
                        <li>1966 Merit Network founded</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Merging the networks and creating the Internet</h3>
                </div>
                <div>
                    <ul>
                        <li>1981 Computer Science Network (CSNET)</li>
                        <li>1982 TCP/IP protocol suite formalized</li>
                    </ul>
                </div>
                <div style="margin: 10px;">
                    <h3>Popular Internet services</h3>
                </div>
                <div>
                    <ul>
                        <li>1990 IMDb Internet movie database</li>
                        <li>1995 Amazon.com online retailer</li>
                    </ul>
                </div>
            </JqxPanel>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));