Buttons / SplitButton / Getting Started
material theme

Getting Started with KendoReact SplitButton

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