Common Scenarios

You can use the configuration options of the DropDownList to achieve the implementation of common scenarios.

Controlling the DropDownList Value

You can use the DropDownList as the so-called "controlled component" in React which is similar to the behavior of the native <select> element.

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" ];
    state = { value: "Large" };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

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

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

Implementing Cascading DropDownLists

The cascading DropDownList is a series of two or more DropDownLists where each DropDownList is filtered based on the selected option from the previous DropDownList.

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { dataCategories, dataProducts, dataOrders } from './data.js';

const defaultItemCategory = { categoryName: 'Select Category ...' };
const defaultItemProduct = { productName: 'Select Product ...' };
const defaultItemOrder = { orderName: 'Select Order ...' };

class AppComponent extends React.Component {
    state = {
        category: null,
        product: null,
        order: null,
        orders: dataOrders,
        products: dataProducts
    };

    categoryChange = (event) => {
        const category = event.target.value;
        const products = dataProducts.filter(product => product.categoryId === category.categoryId);

        this.setState({
            category: category,
            products: products,
            product: null,
            order: null
        });
    }

    productChange = (event) => {
        const product = event.target.value;
        const orders = dataOrders.filter(order => order.productId === product.productId);

        this.setState({
            product: product,
            orders: orders,
            order: null
        });
    }

    orderChange = (event) => {
        this.setState({ order: event.target.value });
    }

    render() {
        const category = this.state.category;
        const product = this.state.product;
        const order = this.state.order;

        const hasCategory = category && category !== defaultItemCategory;
        const hasProduct = product && product !== defaultItemProduct;

        return (
            <div>
                <div style={{ display: 'inline-block' }}>
                    Categories
                    <br />
                    <DropDownList
                        data={dataCategories}
                        textField="categoryName"
                        onChange={this.categoryChange}
                        defaultItem={defaultItemCategory}
                        value={category}
                    />
                </div>
                <div style={{ display: 'inline-block', marginLeft: '30px' }}>
                    Products
                    <br />
                    <DropDownList
                        disabled={!hasCategory}
                        data={this.state.products}
                        textField="productName"
                        onChange={this.productChange}
                        defaultItem={defaultItemProduct}
                        value={product}
                    />
                </div>
                <div style={{ display: 'inline-block', marginLeft: '30px' }}>
                    Orders
                    <br />
                    <DropDownList
                        disabled={!hasProduct}
                        data={this.state.orders}
                        textField="orderName"
                        onChange={this.orderChange}
                        defaultItem={defaultItemOrder}
                        value={order}
                    />
                </div>
            </div>
        );
    }
}

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

Using Data Fields for Values

The following example demonstrates how to implement a Higher-Order Component and allow the use of a DropDownList data field for a value.

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

const DropDownListWithValueField = withValueField(DropDownList);

class AppComponent extends React.Component {
    sports = [
        { text: 'Basketball', id: 1 },
        { text: 'Football', id: 2 },
        { text: 'Tennis', id: 3 },
        { text: 'Volleyball', id: 4 }
    ];
    state = {
        value: null
    };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    Selected Value: {this.state.value}
                </div>
                <DropDownListWithValueField
                    data={this.sports}
                    textField="text"
                    valueField="id"
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

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