React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS ListBox demo. The jqxListBox comes with several useful events. When the user selects an item, the 'select' and 'unselect' events are triggered.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS ListBox demo. The jqxListBox comes with several useful events. When the user selects an item, the 'select' and 'unselect' events are triggered.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS ListBox demo. The jqxListBox comes with several useful events. When the user selects an item, the 'select' and 'unselect' events are triggered.
    </div>
    <div id="app"></div>
    <script src="../build/listbox_events.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxListBox from '../../../jqwidgets-react/react_jqxlistbox.js';import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';class App extends React.Component {
    componentDidMount() {
        this.refs.myListBox.disableAt(5);

        this.refs.myListBox.on('select', (event) => {
            let item = this.refs.myListBox.getItem(event.args.index);
            if (item != null) {
                this.refs.myPanel.prepend('<div style="margin-top: 5px;">Selected: ' + item.label + '</div>');
            }
        });

        this.refs.myListBox.on('unselect', (event) => {
            let item = this.refs.myListBox.getItem(event.args.index);
            if (item != null) {
                this.refs.myPanel.prepend('<div style="margin-top: 5px;">Unselected: ' + item.label + '</div>');
            }
        });
    }
    render() {
        let source =
            [
                'Affogato',
                'Americano',
                'Bicerin',
                'Breve',
                'Cafe Bombon',
                'Cafe au lait',
                'Caffe Corretto',
                'Cafe Crema',
                'Caffe Latte',
                'Caffe macchiato',
                'Cafe melange',
                'Coffee milk',
                'Cafe mocha',
                'Cappuccino',
                'Carajillo',
                'Cortado',
                'Cuban espresso',
                'Espresso',
                'Eiskaffee',
                'The Flat White',
                'Frappuccino',
                'Galao',
                'Greek frappe coffee',
                'Iced Coffee',
                'Indian filter coffee',
                'Instant coffee',
                'Irish coffee',
                'Liqueur coffee'
            ];
        return (
            <div style={{ float: 'left', width: 500 }}>
                <JqxListBox ref='myListBox' style={{ float: 'left', marginTop: 10 }}
                    width={200} height={250} source={source}
                />
                <div style={{ marginLeft: 20, marginTop: 10, float: 'left' }}>
                    <div>
                        <span>Events:</span>
                        <JqxPanel ref='myPanel' style={{ border: 'none' }}
                            width={200} height={250}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));