Sets or gets the autoOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} autoOpen={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoDropDownHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} autoDropDownHeight={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} animationType={'fade'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the checkboxes property.

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

Sets or gets the closeDelay property.

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

Sets or gets the disabled property.

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

Sets or gets the displayMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} valueMember={'value'} displayMember={'label'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownHorizontalAlignment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} dropDownHorizontalAlignment={'right'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownVerticalAlignment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} dropDownVerticalAlignment={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownHeight property.

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

Sets or gets the dropDownWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} dropDownWidth={210}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} enableSelection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableBrowserBoundsDetection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} enableBrowserBoundsDetection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} enableHover={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterable property.

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

Sets or gets the filterHeight property.

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

Sets or gets the filterDelay property.

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

Sets or gets the filterPlaceHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} 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 JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the incrementalSearch property.

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

Sets or gets the incrementalSearchDelay property.

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

Sets or gets the itemHeight property.

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

Sets or gets the openDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} openDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} placeHolder={'Select'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the popupZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} popupZIndex={20000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

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

Sets or gets the renderer property.

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

Sets or gets the selectionRenderer property.

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

Sets or gets the searchMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} searchMode={'startswith'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

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

Sets or gets the source property.

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

Sets or gets the selectedIndex property.

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

Sets or gets the theme property.

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

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} template={'success'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the valueMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1} valueMember={'value'} displayMember={'label'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
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 jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('close', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the checkChange event of jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('checkChange', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('open', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('select', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxDropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.on('unselect', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.addItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.clearSelection();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.clear();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.close();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.checkIndex(0);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.checkItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.checkAll();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.clearFilter();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.destroy();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.disableItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.disableAt(0);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.enableItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.enableAt(10);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.ensureVisible(10);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.focus();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.insertAt('Item1',0);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.indeterminateIndex(0);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.indeterminateItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.loadFromSelect('select');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.open();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.removeItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.removeAt(1);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.selectIndex(1);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.selectItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.setContent('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.updateItem('Item1','New Item');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.updateAt('Item1',0);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.unselectIndex(1);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.unselectItem('item');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.uncheckIndex(1);
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.uncheckItem('Item1');
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDropDownList.uncheckAll();
    }

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let source =
        [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
        return (
            <JqxDropDownList ref='myDropDownList'
                width={200} height={25} source={source} selectedIndex={1}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));