Data and Value Binding

The ComboBox enables you to configure its predefined list of options and selected value.

To set the predefined option list, use the data property. To set the selected value, use the value property.

Data Binding

To bind the ComboBox to data, use the data property of the component.

The data property accepts both:

Arrays of Primitive Values

The following example demonstrates how to bind the ComboBox to an array of primitive values.

import React from 'react';
import ReactDOM from 'react-dom';

import { ComboBox } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sizes = [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ];
    state = {
        value: null
    };

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

    render() {
        return (
            <div>
                <div className="example-config">
                    Selected Value: {this.state.value}
                </div>
                <ComboBox
                    data={this.sizes}
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

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

Datasets of Objects

If the ComboBox is bound to a dataset of objects, the value of the component will correspond to the selected object. To implement the approach, set the textField property.

By default, the ComboBox compares the items by reference. To specify a field from the data object which will be used for the comparison, utilize the dataItemKey property. The dataItemKey property is useful when the reference to the selected item which is configured in the value or defaultValue property do not match its corresponding item from the data collection. If dataItemKey is not set and the references in data and value do not correspond, the selected item will not be highlighted in the drop-down list.

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

class AppComponent extends React.Component {
    sports = [
        { text: 'Basketball', id: 1 },
        { text: 'Football', id: 2 },
        { text: 'Tennis', id: 3 },
        { text: 'Volleyball', id: 4 }
    ];
    state = {
        // Since the reference of the initial value is not from the 'sports' collection,
        // 'dataItemKey' have to be set.
        value: { text: 'Football', id: 2 }
    };

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

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

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

Value Binding

To render the selected value, use the value property of the ComboBox. If you set the value through the value property, hook up to the onChange event and manually update the value of the value property.

import React from 'react';
import ReactDOM from 'react-dom';

import { ComboBox } 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>
                <ComboBox
                    data={this.sizes}
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

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