This package is now deprecated and has been archived. For the current version of the Kendo UI DropDowns for React, refer to the official website

Kendo UI DropDowns for React

• Overview
• Basic Usage
• Installation
• Browser Support
• Glossary
  • Component
  • Package

Overview

This repository contains the source code and documentation of the Kendo UI DropDowns package for React.

Currently, it includes the following components:

• ComboBox
• DropDownList

We are working on porting the ones listed below too:

• AutoComplete
• MultiSelect

Basic Usage

Kendo UI ComboBox

The ComboBox displays a list of pre-defined options. It allows the user to pick a single value from it, or to enter a custom value through keyboard input.

    <div id="app"></div>

    class ComboBoxContainer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                data: [
                    { text: "Foo", value: 1 },
                    { text: "Bar", value: 2 },
                    { text: "Baz", value: 3 }
                ],
                value: null,
                filter: null
            }
        }

        onChange = (value) => {
            this.setState({
                value: value,
                filter: null
            });
        }

        onFilter = (text) => {
            let result = [];
            if (text) {
                result = data.filter(function(item) {
                    return item.text.toLowerCase().startsWith(text.toLowerCase());
                });
            } else {
                result = data;
            }

            this.setState({
                data:result,
                filter: text
            });
        }

        render() {
            return(
                <KendoReactDropdowns.ComboBox
                    data={this.state.data}
                    filter={this.state.filter}
                    placeholder="search..."
                    onChange={this.onChange}
                    onFilter={this.onFilter}
                    textField="text"
                    value={this.state.value}
                    valueField="value"
                />
            )
        }
    }

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

For more examples and available configuration options, refer to the ComboBox documentation.

Kendo UI DropDownList

The DropDownList displays a list of pre-defined options and allows the user to pick a single value from it.

    <div id="app"></div>

    class DropDownListContainer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                data: [
                    { text: "Foo", value: 1 },
                    { text: "Bar", value: 2 },
                    { text: "Baz", value: 3 }
                ],
                value: null
            }
        }

        onChange = (value) => {
            this.setState({
                value: value
            });
        }

        render() {
            return(
                <KendoReactDropdowns.DropDownList
                    data={this.state.data}
                    defaultItem={{ text: "Select...", value: null }}
                    onChange={this.onChange}
                    textField="text"
                    value={this.state.value}
                    valueField="value"
                />
            )
        }
    }

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

For more examples and available configuration options, refer to the DropDownList documentation.

Installation

As of the latest release, the DropDowns have not been published as a public scoped NPM package yet. The team are working on doing so shortly.

Browser Support

The DropDowns work in all browsers supported by the React framework—Internet Explorer 9 and later versions.

Glossary

Below are explained the basic terms the suite for React applies.

Component

A Component refers to a React Component.

Package

A package contains one or more components, developed in a single repository and distributed in a single NPM package. For example, the AutoComplete, ComboBox, and DropDownList components for React are part of the DropDowns Package.