SplitButton Overview

The KendoReact SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.

The SplitButton is part of the kendo-react-buttons NPM package.

Basic Usage

The following example demonstrates the SplitButton in action.

const items=[{
       text: 'Keep Text Only', icon: 'paste-plain-text',
   }, {
       text: 'Paste as HTML', icon: 'paste-as-html'
   }, {
       text: 'Paste Markdown', icon: 'paste-markdown'
   }, {
       text: 'Set Default Paste'
   }];
   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>
                   <SplitButton text="Paste" items={items} />
                 </div>
                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Flat Button</p>
                   <SplitButton text="Paste" items={items} look="flat" />
                 </div>
                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Outline Button</p>
                   <SplitButton text="Paste" items={items} look="outline" />
                 </div>
               </div>
           );
       }
   }
   ReactDOM.render(
       <ButtonContainer/>,
       document.querySelector('my-app')
   );

Functionality and Features

Events

The following example demonstrates the SplitButton 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>
           )
       }
   }
   const items=[{
       text: 'Keep Text Only', icon: 'paste-plain-text',
   }, {
       text: 'Paste as HTML', icon: 'paste-as-html'
   }, {
       text: 'Paste Markdown', icon: 'paste-markdown'
   }, {
       text: 'Set Default Paste'
   }];
   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 ([
               <SplitButton
                   text="Paste"
                   items={items}
                   onButtonClick={() => this.handleDomEvent('button click')}
                   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