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 component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-buttons package.

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