Common Scenarios

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

Implementing Cascading ComboBoxes

The cascading ComboBox is a series of two or more ComboBoxes where each ComboBox is filtered based on the selected option in the previous ComboBox.

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

class AppComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            category: null,
            product: null,
            order: null,
            orders: dataOrders,
            products: dataProducts
        };

        this.categoryChange = this.categoryChange.bind(this);
        this.productChange = this.productChange.bind(this);
        this.orderChange = this.orderChange.bind(this);
    }

    categoryChange(event) {
        const category = event.target.value;
        const products = category ? 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 = product ? 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;
        const hasProduct = product;

        return (
            <div>
                <div style={{ display: 'inline-block' }}>
                    Categories
                    <br />
                    <ComboBox
                        data={dataCategories}
                        textField="categoryName"
                        onChange={this.categoryChange}
                        placeholder="Select Category ..."
                        value={category}
                    />
                </div>
                <div style={{ display: 'inline-block', marginLeft: '30px' }}>
                    Products
                    <br />
                    <ComboBox
                        disabled={!hasCategory}
                        data={this.state.products}
                        textField="productName"
                        onChange={this.productChange}
                        placeholder="Select Product ..."
                        value={product}
                    />
                </div>
                <div style={{ display: 'inline-block', marginLeft: '30px' }}>
                    Orders
                    <br />
                    <ComboBox
                        disabled={!hasProduct}
                        data={this.state.orders}
                        textField="orderName"
                        onChange={this.orderChange}
                        placeholder="Select Order ..."
                        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 ComboBox data field for a value.

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

const ComboBoxWithValueField = withValueField(ComboBox);

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>
                <ComboBoxWithValueField
                    data={this.sports}
                    textField="text"
                    valueField="id"
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

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