jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

React UI Components

  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

React UI Components

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxSortable
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxDockingLayout

jqxComboBox

  • Default Functionality
  • Multi Select
  • Settings
  • Categories
  • Binding to XML
  • Binding to JSON
  • Binding to Remote Data
  • Custom Rendering
  • Templates
  • DropDown Horizontal Alignment
  • DropDown Vertical Alignment
  • Cascading ComboBoxes
  • Checkboxes
  • Animation
  • Fluid Size
  • Events
  • Keyboard Navigation
  • Right to Left Layout
Theme:
Light
  • Demo
  • App.htm
  • App.js
In this demo React ComboBox is illustrated how to display checkboxes next to the ComboBox items. The combobox's input field in this mode is readonly.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        In this React ComboBox demo is illustrated how to display checkboxes next to the ComboBox items. The combobox's input field in this mode is readonly.
    </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/jqxdata.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="../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        In this demo React ComboBox is illustrated how to display checkboxes next to the ComboBox items. The combobox's input field in this mode is readonly.
    </div>
    <div id="app"></div>
    <script src="../build/combobox_checkboxes.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxComboBox from '../../../jqwidgets-react/react_jqxcombobox.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myComboBox.checkIndex(0);

        this.refs.myComboBox.on('checkChange', (event) => {
            if (event.args) {
                let item = event.args.item;
                if (item) {
                    let valueElement = document.createElement('div');
                    valueElement.innerHTML = 'Value: ' + item.value;
                    let labelElement = document.createElement('div');
                    labelElement.innerHTML = 'Label: ' + item.label;
                    let checkedElement = document.createElement('div');
                    checkedElement.innerHTML = 'Checked: ' + item.checked;
                    let selectionLog = document.getElementById('selectionlog');
                    while (selectionLog.firstChild) {
                        selectionLog.removeChild(selectionLog.firstChild);
                    }
                    selectionLog.appendChild(labelElement);
                    selectionLog.appendChild(valueElement);
                    selectionLog.appendChild(checkedElement);


                    let items = this.refs.myComboBox.getCheckedItems();
                    let checkedItems = '';
                    $.each(items, function (index) {
                        checkedItems += this.label + ', ';
                    });
                    document.getElementById('checkedItemsLog').innerHTML = checkedItems;
                }
            }
        });

    }
    render() {
        let source =
            {
                datatype: 'json',
                datafields: [
                    { name: 'CompanyName' },
                    { name: 'ContactName' }
                ],
                id: 'id',
                url: '../sampledata/customers.txt',
                async: false
            };
        let dataAdapter = new $.jqx.dataAdapter(source);
        return (
            <div>
                <JqxComboBox ref='myComboBox' style={{ float: 'left' }}
                    width={200} height={25} source={dataAdapter} checkboxes={true}
                    displayMember={'ContactName'} valueMember={'CompanyName'}
                />
                <div style={{ float: 'left', marginLeft: 20, fontSize: 13, fontFamily: 'Verdana' }}>
                    <div id='selectionlog' />
                    <div style={{ maxWidth: 300, marginTop: 20 }} id='checkedItemsLog' />
                </div>
            </div>
        )
    }
}

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

Maria Anders
Ana Trujillo
Antonio Moreno
Thomas Hardy
Christina Berglund
Hanna Moos
Frdrique Citeaux
Martn Sommer
Laurence Lebihan
Elizabeth Lincoln
Victoria Ashworth
jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2019. All Rights Reserved.