DropDownButton Overview

The KendoReact DropDownButton looks like the Button and when clicked, it displays a popup list with action items.

The DropDownButton is part of the kendo-react-buttons NPM 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')
   );

In this article