React UI Components Documentation

Sets or gets the arrowOffsetValue property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationOpenDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} animationOpenDelay={100}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationCloseDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} animationCloseDelay={50}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoClose property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} autoClose={true}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} animationType={'fade'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} height={50}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the initContent property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} initContent={initContent}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the isModal property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} isModal={true}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the offset property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} offset={{left: 10, top: 10}}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the position property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} rtl={true}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selector property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} selector={'$("#button")'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showArrow property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} showArrow={true}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showCloseButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} width={200}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the title property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'} theme={'arctic'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popover is closed.

Code examples

Bind to the close event of jqxPopover.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPopover.on('close', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popover is opened.

Code examples

Bind to the open event of jqxPopover.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPopover.on('open', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPopover.close();
    }

    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPopover.destroy();
    }

    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPopover from 'jqwidgets-react/react_jqxpopover.js';
import JqxButton from 'jqwidgets-react/react_jqxbuttons.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myPopover.open();
    }

    render() {              
        return (
            <div>
                <JqxPopover ref='myPopover'
                    offset={{ left: 0, top: -125 }} arrowOffsetValue={-240} position={'left'}
                    title={'Employees'} showCloseButton={true} selector={'#container'}>
                    <div>
                        // Some Data
                    </div>
                </JqxPopover>
                <div className="jqx-widget-header" style={{ height: 800, width: 140, float: 'right', marginTop: 30, borderWidth: 1, borderStyle: 'solid', padding: 10 }} id="container">
                    <JqxButton style={{ float: 'right', marginTop: 10, borderRadius: 6 }}
                        width={140} height={35}>
                        View Employees
                    </JqxButton>
                </div>
            </div>        
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));