ReactJS DropDownList Component

The DropDownList component for ReactJS contains a list of selectable items displayed in a DropDown.

Prerequisites

Refer to ReactJS Getting Started before you start with this help topic.

Configuration

The DropDownList component for ReactJS requires the following imports.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDropDownList from 'jqwidgets-react/react_jqxdropdownlist.js';
 

Then we create our component class. Properties and methods are put as ReactJS props.

  
class App extends React.Component {
  render () {
    return (
        <JqxDropDownList 
            width={200} height={50} source={source}
        />
    )
  }
}
 

Finally we render our class in the desired HTML element:

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

Events Methods & Properties

In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the ReactJS "ref" Callback Attribute:

 
<JqxDropDownList ref='myDropDownList' width={200} height={50}..... />
 

Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() ReactJS Component Lifecycle method.

 
class App extends React.Component {
  componentDidMount()
  {
     //your logic
  }
  render ()
  {
    return
    (
      ....
    )
  }
};
 

Events

The open event is triggered when the popup ListBox is opened.

The following example demonstrates how to add an event listener:

 
componentDidMount ()
{
 
  this.refs.myDropDownList.on('open', (event) =>
  {
     //your logic
  });
 
}
 

Methods & Properties

This is how you call methods & props:

 
//Get Methods
let item = this.refs.myDropDownList.getItem(1);
 
//Set Methods
this.refs.myDropDownList.setContent('My Content');
 
//Get Properties
let height = this.refs.myDropDownList.height();
 
//Set Properties
this.refs.myDropDownList.height(250);
 
 

Every component have a method setOptions which accepts a object as an argument. This object contains component settings.

 
this.refs.myDropDownList.setOptions({
    filterDelay: 250, width: 110, height: 300
})
 

Every component also have a method getOptions which returns a object containing the component settings.

 
let options = this.refs.myDropDownList.getOptions();
 

DropDownList Examples

Overview

The following example demonstrates how to create a DropDownList component.

 
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",
        "Café Crema",
        "Caffé Latte",
        "Espresso"
    ];  
    return (
        <JqxDropDownList width={200} height={50} source={source} />
    )
  }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
 

Disabled DropDownList

The following example demonstrates how to disable the DropDownList component.

DropDownList API