Buttons / DropDownButton / Getting Started
material theme

Getting Started with KendoReact DropDownButton

The KendoReact DropDownButton displays a popup list with action items and provides options for enabling or disabling its content, displaying icons, and binding it to data.

The KendoReact DropDownButton is distributed through NPM under the kendo-react-buttons package.

The DropDownButton component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the DropDownButton in action.

const items = ['My Profile', 'Friend Requests', 'Account Settings', 'Support', 'Log Out'];
class ButtonContainer extends React.Component {
    render() {
        return (
            <div className="row example-wrapper">
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Default Button</p>
                <DropDownButton text="User Settings" items={items} />
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Primary Button</p>
                <DropDownButton text="User Settings" items={items} primary={true} />
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Outline Button</p>
                <DropDownButton text="User Settings" items={items} look="outline" />
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Bare Button</p>
                <DropDownButton text="User Settings" items={items} look="bare" />
              </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer/>,
    document.querySelector('my-app')
);

Functionality and Features

Events

The following example demonstrates the DropDownButton events.

class EventLog extends React.Component {
    renderLogs = () => {
        return this.props.logs.map((log, index)=> {
            return(<li key={index}>{log}</li>)
        })
    }
    render() {
        return(
            <div className="example-config">
              <h5>{this.props.title}</h5>
              <ul className="event-log" style={{ textAlign: 'right' }}>
                {this.renderLogs()}
              </ul>
            </div>
        )
    }
}
class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { logs: [] };
    }
    handleDomEvent = (eventType) => {
        this.setState((state, props) => {
          let logs = state.logs.slice();
          logs.unshift(eventType);
          return { logs };
        });
    }
    render() {
        return ([
            <DropDownButton
                text="User Settings"
                items={['My Profile', 'Friend Requests', 'Account Settings', 'Support', 'Log Out']}
                onItemClick={() => this.handleDomEvent('item click')}
                onFocus={() => this.handleDomEvent('focus')}
                onBlur={() => this.handleDomEvent('blur')}
                onOpen={() => this.handleDomEvent('open')}
                onClose={() => this.handleDomEvent('close')}
            />,
            <EventLog title="Event Log" logs={this.state.logs}/>
        ])
    }
}
ReactDOM.render(
    <ButtonContainer/>,
    document.querySelector('my-app')
);

Is this article helpful?

Not finding the help you need?

Contact Support