Keyboard Navigation

The keyboard support of the Dialog is always available.

The Dialog supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Alt+w Focuses the Dialog.
Esc Closes the Dialog.
Enter or Space Triggers the focused action and the Close button if focused.
<div id="vueapp" class="vue-app">
    <kendo-dialog ref="dialog" :modal="false"
                  :width="180"
                  :title="'Hello Dialog'">
        {{dialogContent}}
        <kendo-dialog-action :text="'Push!'"></kendo-dialog-action>
        <kendo-dialog-action :text="'Push Now!'"
                             :primary="true"
                             :action="actionMethod">
        </kendo-dialog-action>
    </kendo-dialog>
</div>
Vue.use(DialogInstaller);

new Vue({
    el: '#vueapp',
    created: function() {
            window.addEventListener('keydown', this.down);
    },
    data () {
      return {
        dialogContent: 'Some content'
      }
    },
    methods: {
      actionMethod (e) {
        console.log('You chose to Push Now!')
        },
        down (ev) {
                if (ev.altKey && ev.keyCode === 87 /* w */) {
                        this.$refs.dialog.kendoWidget().element.focus();
                }
        }
    }
})

In this article