All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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