Wrapper Components / Buttons / ToolBar

Command Types

The ToolBar provides the various types of commands which you can use inside the component.

The available command types are:

  • Button
  • Toggle button
  • Split button
  • Group of buttons
  • Separator
  • Custom templates

For more details, refer to the documentation on the Kendo UI ToolBar for jQuery.

<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 template="<label for='dropdown'>Format:</label>"></kendo-toolbar-item>
            <kendo-toolbar-item template="<input id='dropdown' style='width: 150px;' />" overflow="never"></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="buttonGroup" :buttons="[
                { icon: 'bold', togglable: true },
                { icon: 'italic', togglable: true },
                { icon: 'underline', togglable: true }]">
            </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",
    mounted: function() {
        kendo.jQuery('#dropdown').kendoDropDownList({
            optionLabel: 'Paragraph',
            dataTextField: 'text',
            dataValueField: 'value',
            dataSource: [
                { text: 'Heading 1', value: 1 },
                { text: 'Heading 2', value: 2 },
                { text: 'Heading 3', value: 3 },
                { text: 'Title', value: 4 },
                { text: 'Subtitle', value: 5 }
            ]
        })
    }
})

In this article