All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

ToolBar Overview

The ToolBar holds various controls such as buttons, groups of buttons, toggle buttons, split buttons, and other customized elements.

The ToolBar wrapper for React is a client-side wrapper for the Kendo UI ToolBar widget.

Basic Usage

The following example demonstrates the ToolBar in action.

class ToolBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.toolbarItems = [
            { type: 'button', text: 'Button' },
            { type: 'button', text: 'Toggle Button', togglable: true },
            {
                type: 'splitButton',
                text: 'Insert',
                menuButtons: [
                    { text: 'Insert above', icon: 'insert-up' },
                    { text: 'Insert between', icon: 'insert-middle' },
                    { text: 'Insert below', icon: 'insert-down' }
                ]
            },
            { type: 'separator' },
            { template: '<label for="dropdown">Format:</label>' },
            {
                template: '<input id="dropdown" style="width: 150px;" />',
                overflow: 'never'
            },
            { type: 'separator' },
            {
                type: 'buttonGroup',
                buttons: [
                    { icon: 'align-left', text: 'Left', togglable: true, group: 'text-align' },
                    { icon: 'align-center', text: 'Center', togglable: true, group: 'text-align' },
                    { icon: 'align-right', text: 'Right', togglable: true, group: 'text-align' }
                ]
            },
            {
                type: 'buttonGroup',
                buttons: [
                    { icon: 'bold', text: 'Bold', togglable: true },
                    { icon: 'italic', text: 'Italic', togglable: true },
                    { icon: 'underline', text: 'Underline', togglable: true }
                ]
            },
            {
                type: 'button',
                text: 'Action',
                overflow: 'always'
            },
            {
                type: 'button',
                text: 'Another Action',
                overflow: 'always'
            },
            {
                type: 'button',
                text: 'Something else here',
                overflow: 'always'
            }
        ]
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-12 example-col">
                    <ToolBar items={this.toolbarItems}>
                    </ToolBar>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ToolBarContainer />,
    document.querySelector('my-app')
);

Features and Functionalities

The ToolBar enables you to set its command types.

Events

The following example demonstrates basic ToolBar events. You can subscribe to all ToolBar events by the handler name.

class ToolBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.toolbarItems = [
            { type: 'button', text: 'Button', id: 0 },
            {
                type: 'splitButton',
                text: 'Insert',
                id: 1,
                menuButtons: [
                    { text: 'Insert above', icon: 'insert-up', id: 2 },
                    { text: 'Insert between', icon: 'insert-middle', id: 3 },
                    { text: 'Insert below', icon: 'insert-down', id: 4 }
                ]
            }
        ]
    }

    onClick = (e) => {
        console.log("The ID of the clicked item is: " + e.id);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-12 example-col">
                    <ToolBar
                        items={this.toolbarItems}
                        click={this.onClick}>
                    </ToolBar>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ToolBarContainer />,
    document.querySelector('my-app')
);
In this article