React UI Components Documentation

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} animationType={'fade'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoComplete property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} autoComplete={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} autoOpen={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoItemsHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} autoItemsHeight={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoDropDownHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} autoDropDownHeight={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} closeDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the checkboxes property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} checkboxes={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} displayMember={'text'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownHorizontalAlignment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} dropDownHorizontalAlignment={'right'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownVerticalAlignment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} dropDownVerticalAlignment={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} dropDownHeight={300}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} dropDownWidth={300}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} enableHover={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} enableSelection={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableBrowserBoundsDetection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} enableBrowserBoundsDetection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the itemHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} itemHeight={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the multiSelect property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} multiSelect={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minLength property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} minLength={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the openDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} openDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the popupZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} popupZIndex={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} placeHolder={'Text'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the remoteAutoComplete property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} remoteAutoComplete={true} remoteAutoCompleteDelay={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the remoteAutoCompleteDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} remoteAutoComplete={true} remoteAutoCompleteDelay={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} renderer={renderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderSelectedItem property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} renderSelectedItem={renderSelectedItem}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectedIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} selectedIndex={0}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showArrow property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} showArrow={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showCloseButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} showCloseButtons={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the searchMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} searchMode={'contains'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the search property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} search={search}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} scrollBarSize={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} template={'success'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the validateSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} validateSelection={validateSelection}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the valueMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25} valueMember={'value'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the data binding operation is completed.

Code examples

Bind to the bindingComplete event of jqxComboBox.

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.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when an item is checked/unchecked.

Code examples

Bind to the checkChange event of jqxComboBox.

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.on('checkChange', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxComboBox.

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.on('close', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxComboBox.

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.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxComboBox.

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.on('open', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxComboBox.

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.on('select', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxComboBox.

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.on('unselect', (event) => {
            // Do Something...
        });
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.addItem('item');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.clearSelection();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.clear();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.close();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.checkItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.checkAll();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.destroy();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.disableItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.disableAt(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.enableItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.enableAt(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.ensureVisible(10);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.focus();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getItem();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getItemByValue('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getVisibleItems();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getItems();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getCheckedItems();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getSelectedItem();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getSelectedItems();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.getSelectedIndex();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.insertAt('Item1',0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.isOpened();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.indeterminateIndex(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.indeterminateItem('Item1',0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.loadFromSelect('id');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.open();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.removeItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.removeAt(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.selectIndex(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.selectItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.searchString();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.updateItem('Item1','New Item');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.updateAt('Item1',0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.unselectIndex(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.unselectItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.uncheckIndex(0);
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.uncheckItem('Item1');
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.uncheckAll();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxComboBox from 'jqwidgets-react/react_jqxcombobox.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myComboBox.val();
    }

    render() {       
        let countries = [
            { value: 'DE', label: 'Germany' },
            { value: 'UK', label: 'United Kingdom' },
            { value: 'US', label: 'United States' }
        ];
        return (
            <JqxComboBox ref='myComboBox'
                source={countries} width={200} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));