Keyboard Navigation

The keyboard navigation of the ListBox is always available.

To prevent the keyboard navigation, set navigatable to false. The selectable prop indicates whether the selection is single or multiple and is single by default.

The ListBox supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Alt+w Focuses the ListBox.
Up Arrow Selects the previous item.
Down Arrow Selects the next item.
Del Deletes the selected items.
Ctrl+Space Selects or deselects an item.
Shift+Up Arrow Adds the previous item to the selected items.
Shift+Down Arrow Adds the next item to the selected items.
Ctrl+Right Arrow Adds the selected items to the connected ListBox.
Ctrl+Left Arrow Adds the selected items from the connected ListBox to the current.
Ctrl+Up Arrow Moves the focus to the previous item.
Ctrl+Down Arrow Moves the focus to the next item.
Ctrl+Shift+Up Arrow Shifts the selected items upwards.
Ctrl+Shift+Down Arrow Shifts the selected items downwards.
Ctrl+Shift+Left Arrow Transfers all items to the connected ListBox.
Ctrl+Shift+Right Arrow Transfers all items from the connected ListBox.
<div id="vueapp" class="vue-app">
       <kendo-listbox ref="listbox"
                    id="optional"
                   :draggable="true"
                   :connect-with="'selected'"
                   :drop-sources="['selected']"
                   :toolbar-tools="['moveUp', 'moveDown', 'transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom', 'remove']"
                   style="height:280px;">
        <option>Steven White</option>
        <option>Nancy King</option>
        <option>Nancy Davolio</option>
        <option>Robert Davolio</option>
        <option>Michael Leverling</option>
        <option>Andrew Callahan</option>
        <option>Michael Suyama</option>
    </kendo-listbox>
    <kendo-listbox id="selected"
                   :draggable="true"
                   :connect-with="'optional'"
                   :drop-sources="['optional']"
                   style="height:280px;">
    </kendo-listbox>
</div>
Vue.use(ListBoxInstaller);

new Vue({
    el: "#vueapp",
    created: function() {
        window.addEventListener('keydown', this.down);
    },
    methods: {
        down (ev) {
            if (ev.altKey && ev.keyCode === 87 /* w */) {
                this.$refs.listbox.kendoWidget().focus();
            }
        }
    }
})

In this article