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 the user supplies a non-recognized action name, the Window treats that action name as a custom action. As a result, the Window renders the k-icon and k-i-actionname (all lowercase) CSS classes for it and does not automatically attach a click event handler. By default, the Kendo UI stylesheets provide an icon for "custom"-named actions—however, you can use any other name for the non-recognized action and then capture and handle the click events 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',
                'Custom'
            ]
        }
    }
})

In this article