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