Dropdowns / DropDownList / Common Scenarios
material theme

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')
);