Default Item

The DropDownList enables you to configure its default item.

The defaultItem property type has to match the data type. For example, if the data property contains a list of objects, the defaultItem has to be defined as an object with the same textField as the data items.

The following example demonstrates how to define a defaultItem as a primitive value.

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

class AppComponent extends React.Component {
    sports = [ 'Basketball', 'Football', 'Tennis', 'Volleyball' ];

    render() {
        return (
            <DropDownList
                data={this.sports}
                defaultItem="Select sport ..."
            />
        );
    }
}

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

The following example demonstrates how to define a defaultItem as an object value.

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } 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 }
    ];

    defaultItem = { text: 'Select sport ...' };

    render() {
        return (
            <DropDownList
                data={this.sports}
                textField="text"
                defaultItem={this.defaultItem}
            />
        );
    }
}

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