Keyboard Navigation

The keyboard navigation of the Window is always available.

The Window supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Alt+w Focuses the Window.
Alt+p Toggles the pin.
Alt+Up Arrow Maximizes and restores the Window.
Alt+Down Arrow Minimizes and restores the Window.
Alt+r Refreshes the Window.
Esc Closes the Window.
Left Arrow Moves the Window to the left.
Left Arrow Moves the Window to the right.
Up Arrow Moves the Window up.
Down Arrow Moves the Window down.
Ctrl+Left Arrow Narrows the Window in horizontal direction.
Ctrl+Right Arrow Expands the Window in horizontal direction.
Ctrl+Down Arrow Expands the Window in vertical direction.
Ctrl+Up Arrow Narrows the Window in vertical direction.
<div id="vueapp" class="vue-app">
    <kendo-window ref="window1"
                  id="window1"
                  :width="'600px'"
                  :title="'About Alvar Aalto'"
                  :visible="visible"
                  style="display:none"
                  v-on:close="onClose">
        <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
        <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
        <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
    </kendo-window>
    <span id="undo" ref="undo" style="display:none" class="k-button hidden-on-narrow" v-on:click="openWindow">Click here to open the window.</span>
</div>
Vue.use(WindowInstaller);

new Vue({
    el: '#vueapp',
    created() {
        var vm = this;
        window.addEventListener('keydown', (e) => {
            if (e.altKey && e.keyCode == 87) {
                $(vm.$refs.window1.$el).focus();
            }
        });
    },
    data () {
        return {
            visible: true
        }
    },
    methods: {
        onClose: function (ev) {
            $(this.$refs.undo).fadeIn();
        },
        openWindow: function (ev) {
            var win = this.$refs.window1.kendoWidget();
            win.open();
            $(this.$refs.undo).fadeOut();
        }
    }
})

In this article