React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

This React JS demo shows multiple selection with jQWidgets listbox component. To enable the multiple selection functionality you have to set the 'multiple' property to true. By doing this you will be able to select several items of the listbox simultaneously.

<!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 widget supports multiple selection. You can enable this functionality by setting the 'multiple' property to true.
    </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/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 widget supports multiple selection. You can enable this functionality by setting the 'multiple' property to true.
    </div>
    <div id="app"></div>
    <script src="../build/listbox_multipleselection.bundle.js"></script>
</body>
</html>

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

        this.displaySelectedItems();

        this.refs.myListBox.on('change', () => {
            this.displaySelectedItems();
        });
    }
    displaySelectedItems() {
        let items = this.refs.myListBox.getSelectedItems();
        let selection = 'Selected Items: ';
        for (let i = 0; i < items.length; i++) {
            selection += items[i].label + (i < items.length - 1 ? ', ' : '');
        }
        document.getElementById('selectionLog').innerHTML = selection;
    }
    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>
                <JqxListBox ref='myListBox'
                    width={200} height={250}
                    source={source} multiple={true}
                />
                <div style={{ marginTop: 30, fontSize: 13, fontFamily: 'Verdana' }} id='selectionLog' />
            </div>
        )
    }
}

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