All Components

Resizing

The ToolBar enables you to automatically show or hide items based on the available space.

To manage the behavior of the items that will be rendered in the drop-down list, set their overflow option.

The available overflow values are:

  • (Default) auto
  • always—Always renders the item in the drop-down list.
  • never

The following example demonstrates how show or hide the ToolBar items on resizing.

<div id="vueapp" class="vue-app">
    <div class="col-xs-12 col-sm-12 example-col">

    <kendo-button ref="buttonRef" style="display:none" @click="onClick">Click here to open the window</kendo-button>

    <kendo-window ref="windowRef"
                  :width="'790px'"
                  :height="'150px'"
                  @close="onWindowClose"
                  @open="onWindowOpen"
                  :title="'This is Window'">
        <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>
    </kendo-window>
    </div>
</div>
Vue.use(ButtonsInstaller);
Vue.use(WindowInstaller);

new Vue({
    el: "#vueapp",
    mounted: function() {
        kendo.jQuery("#contacts").kendoDropDownList({
            optionLabel: "Ann Devon",
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Ana Trujillo", value: 1 },
                { text: "Antonio Moreno", value: 2 },
                { text: "Christina Berglund", value: 3 },
                { text: "Felipe Izquierdo", value: 4 }
            ]
        });
        kendo.jQuery('#labels').kendoDropDownList({
            optionLabel: "Forums",
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Follow up", value: 1 },
                { text: "Misc", value: 2 },
                { text: "Priority", value: 3 },
                { text: "Deleted Messages", value: 4 }
            ]
        })
    },
    methods: {
        onClick (e) {
            var window = this.$refs.windowRef.kendoWidget();
            window.center().open();
        },
        onWindowClose (e){
            var button = this.$refs.buttonRef.kendoWidget();
            button.element.show();       
        },
        onWindowOpen (e){
            e.sender.center()
            var button = this.$refs.buttonRef.kendoWidget();        
            button.element.hide();      
        }
    }
})
In this article