DropDownList Overview

The DropDownList is a form component that lets you choose a single predefined value from a list.

It is a richer version of the <select> element and supports filtering, default items, and virtualization.

Basic Usage

The following example demonstrates the DropDownList in action.

import React from 'react';
import ReactDOM from 'react-dom';

import { DropDownList } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sizes = [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ];

    render() {
        return (
            <div>
                <div>T-shirt size:</div>
                <DropDownList data={this.sizes} />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Functionality and Features

Events

The DropDownList provides events which:

Common Usage

The following example demonstrates basic DropDownList events.

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];
    state = { events: [] };

    onOpen = () => { this.log('open'); }
    onClose = () => { this.log('close'); }
    onFocus = () => { this.log('focus'); }
    onBlur = () => { this.log('blur'); }
    onChange = (event) => { this.log('change', event.target.value); }
    onFilterChange = (event) => { this.log('filterChange', event.filter.value); }

    render() {
        return (
            <div>
                <DropDownList
                    data={this.source}
                    onOpen={this.onOpen}
                    onClose={this.onClose}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onChange={this.onChange}
                    onFilterChange={this.onFilterChange}
                    filterable={true}
                />
                <br />
                <br />
                <EventsLogger events={this.state.events} />
            </div>
        );
    }

    log(event, arg) {
        const events = this.state.events;
        events.unshift(`${event} ${arg || ""}`);

        this.setState({
            events: events
        });
    }
}

class EventsLogger extends React.Component {
    render() {
        return (
            <div className="example-config">
                <h5>Event log</h5>
                <ul className="event-log" style={{ textAlign: 'right' }}>
                    {this.props.events.map(function(event, index) {
                        return (<li key={index}>{event}</li>);
                    })}
                </ul>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Looping through Items

By default, you can select a DropDownList item by pressing a keyboard key. For example, if the DropDownList items are Foo, Bar, and Baz and the user presses the B letter key, based on the alphabetical order of the items, the keypress selects the first item which starts with a B.

The keyboard selection is available only if the filtering functionality is disabled.

In this article