React UI Components Documentation

Sets or gets the autoHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} autoHeight={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the allowDrag property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} allowDrag={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the allowDrop property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} allowDrop={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the checkboxes property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} checkboxes={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} displayMember={'text'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropAction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} dropAction={'copy'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dragStart property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} dragStart={dragStart}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dragEnd property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} dragEnd={dragEnd}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} enableHover={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} enableSelection={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the equalItemsWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} equalItemsWidth={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} filterable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} filterable={true} filterHeight={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} filterable={true} filterDelay={300}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterPlaceHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} filterable={true} filterPlaceHolder={'Filtering...'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hasThreeStates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} hasThreeStates={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the itemHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} itemHeight={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the incrementalSearch property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} incrementalSearch={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the incrementalSearchDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} incrementalSearchDelay={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the multiple property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} multiple={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the multipleextended property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} multipleextended={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} renderer={renderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rendered property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} rendered={rendered}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectedIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} selectedIndex={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectedIndexes property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} selectedIndex={selectedIndex}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} scrollBarSize={15}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the searchMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} searchMode={'startswithignorecase'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the valueMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source} valueMember={'value'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxListBox from 'jqwidgets-react/react_jqxlistbox.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code example

Bind to the bindingComplete event by type: jqxListBox.

Code examples

Bind to the bindingComplete event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code example

Bind to the change by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the change event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user checks or unchecks an item.

Code example

Bind to the checkChange event by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the checkChange event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user starts a drag operation.

Code example

Bind to the dragStart event by type: jqxListBox.

Code examples

Bind to the dragStart event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user drops an item.

Code example

Bind to the dragdragEndnd event by type: jqxListBox.

Code examples

Bind to the dragEnd event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code example

Bind to the select event by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the select event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user unselects an item.

Code example

Bind to the unselect event by type: jqxListBox.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code examples

Bind to the unselect event of jqxListBox.

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source = 
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxListBox ref='myListBox'
                 width={200} height={250} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));