All Components

Actions

The following example demonstrates how to create a modal Window with a predefined position and enable all user actions.

Predefined User Actions

The order of the values in the actions array determines the order in which the action buttons are rendered in the title of a Window. The maximize action serves both as a button for expanding a Window to fill the screen and as a button to restore a Window to its previous size. The minimize action collapses a Window to its title.

<div id="vueapp" class="vue-app">
    <kendo-window :width="'300px'"
                  :title="'Window title'"
                  :modal="true"
                  :resizable="false"
                  :pinned="false"
                  :position-top="100"
                  :position-left="100"
                  :actions="actions">
        <h4>Window content</h4>
    </kendo-window>
</div>
Vue.use(WindowInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            actions: [
                'Pin',
                'Minimize',
                'Maximize',
                'Close'
            ]
        }
    }
})

Custom User Actions

If a non-recognized action name is supplied, it is treated as a custom action and the k-icon and k-i-actionname (all lowercase) CSS classes are rendered for it. No click event handler is automatically attached either. The Kendo UI stylesheets have a supplied icon for actions with the name "custom", but you can use any name. The click events can be captured and handled in a standard way.

<div id="vueapp" class="vue-app">
    <kendo-window :actions="actions"></kendo-window>
</div>
Vue.use(WindowInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            actions: [
                'Pin',
                'Minimize',
                'Maximize',
                'Close',
                'myCustomAction'
            ]
        }
    }
})
In this article