@progress/kendo-dropdowns-react-wrapper/docs/dropdownlist/index.md

Kendo UI DropDowns wrapper for React

---
title: Overview
page_title: Overview - DropDownList - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI DropDownList delivers and use the wrapper in React projects."
slug: overview_dropdownlist
position: 1
---

# DropDownList Overview

The DropDownList provides a list of predefined options and allows for a single item selection from that list.

The DropDownList wrapper for React is a client-side wrapper for the [Kendo UI DropDownList](http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist) widget.

> To apply a keyboard input, use the [Kendo UI ComboBox](http://docs.telerik.com/kendo-ui/controls/editors/combobox/overview).

## Basic Usage

The following example demonstrates the DropDownList in action.

```jsx-preview
class DropDownListContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.placeholder = "Enter a fruit..."
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <DropDownList
                        dataSource={this.dataSource}
                        placeholder={this.placeholder}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <DropDownListContainer data={["Apples","Oranges"]}/>,
    document.querySelector('my-app')
);
```

## Features and Functionalities

* [Data binding]({% slug databinding_dropdownlist %})
* [Templates]({% slug templates_dropdownlist %})
* [Grouping]({% slug grouping_dropdownlist %})
* [Virtualization]({% slug virtualization_dropdownlist %})

## Events

The following example demonstrates basic DropDownList events. You can subscribe to [all DropDownList events](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events) by the handler name.

```jsx
class DropDownListContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.filterType = "contains";
        this.onChange = this.onChange.bind(this);
        this.onOpen = this.onOpen.bind(this);
        this.onFilter = this.onFilter.bind(this);
        this.onClose = this.onClose.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.onDataBound = this.onDataBound.bind(this);
    }

    onChange = (e) => {
         console.log("event :: change");
    }

    onOpen = (e) => {
        console.log("event :: open");
    }

    onClose = (e) => {
        console.log("event :: close");
    }

    onSelect= (e) => {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem + ")" );
    }

    onDataBound = (e) => {
        console.log("event :: dataBound");
    }

    onFilter = (e) => {
        console.log("event :: filter");
    };

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <DropDownList
                        change={this.onChange}
                        open={this.onOpen}
                        filter={this.filterType}
                        filtering={this.onFilter}
                        close={this.onClose}
                        select={this.onSelect}
                        dataBound={this.onDataBound}
                        dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <DropDownListContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]}/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI DropDownList for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/overview)
* [API Reference of the DropDownList Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist)