All Components

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 Vue is a client-side wrapper for the Kendo UI ToolBar widget.

Basic Usage

The following example demonstrates the ToolBar in action.

<div id="vueapp" class="vue-app">
    <div class="col-xs-12 col-sm-12 example-col">
        <kendo-toolbar>
            <kendo-toolbar-item type="button" text="Button"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Toggle Button" :togglable="true"></kendo-toolbar-item>
            <kendo-toolbar-item type="splitButton" text="Insert" :menu-buttons="[
                { text: 'Insert above', icon: 'insert-up' },
                { text: 'Insert between', icon: 'insert-middle' },
                { text: 'Insert below', icon: 'insert-down' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="separator"></kendo-toolbar-item>
            <kendo-toolbar-item 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' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Action" overflow="always"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Another Action" overflow="always"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Something else here" overflow="always"></kendo-toolbar-item>
        </kendo-toolbar>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"
})

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.

<div id="vueapp" class="vue-app">
    <div class="col-xs-12 col-sm-12 example-col">
        <kendo-toolbar @click="onClick"
                       @close="onClose"
                       @open="onOpen"
                       @toggle="onToggle"
                       @overflowClose="onOverflowClose"
                       @overflowOpen="onOverflowOpen">
            <kendo-toolbar-item type="button" text="Button"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Toggle Button" :togglable="true"></kendo-toolbar-item>
            <kendo-toolbar-item type="splitButton" text="Insert" :menu-buttons="[
                { text: 'Insert above', icon: 'insert-up' },
                { text: 'Insert between', icon: 'insert-middle' },
                { text: 'Insert below', icon: 'insert-down' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Action" overflow="always"></kendo-toolbar-item>
        </kendo-toolbar>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        onClick: function (e) {
            console.log("Event :: click");
        },
        onClose: function (e) {
            console.log("Event :: close");
        },
        onOpen: function (e) {
            console.log("Event :: open");
        },
        onToggle: function (e) {
            console.log("Event :: toggle");
        },
        onOverflowClose: function (e) {
            console.log("Event :: overflow close");
        },
        onOverflowOpen: function (e) {
            console.log("Event :: overflow open");
        }
    }
})
In this article