5.3 KiB

Исходник Ответственный История

Kendo UI DropDowns for React

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.

5.3 KiB Исходник Ответственный История