Keyboard Navigation

The keyboard support of the MultiSelect is always available.

To apply the keyboard shortcuts, focus the MultiSelect by clicking the example area and pressing the Tab key.

When the popup is closed, the MultiSelect supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Left Arrow  Highlights the previously selected item.
 Right Arrow  Highlights the next selected item.
 Home  Selects the first selected item.
 End  Selects the last selected item.
 Delete  Removes the highlighted item from the selection.
 Backspace  Removes the previously selected item from the selection.
 Down Arrow  Opens the popup.
 Esc  Clears all selected items.

When the popup is opened, the MultiSelect supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Up Arrow 
  • Highlights the previous item.
  • Closes the popup if the first item is highlighted.
 Shift+Up Arrow  Selects the previous item.
 Down Arrow Highlights the next item.
 Shift+Down Arrow Selects the next item.
 Home  Highlights the first item in the list.
 Ctrl+Shift+Home Selects all items from the beginning.
 End  Highlights the last item in the list.
 Ctrl+Shift+End Selects all items to the end.
 Page Up  Scrolls the popup up.
 Page Down  Scrolls the popup down.
 Enter  Selects the highlighted item.
 Ctrl+Space  Selects the highlighted item.
 Ctrl+A  Selects all items.
 Esc  Closes the popup.
<div id="vueapp" class="vue-app">
    <kendo-multiselect :data-source="dataSourceArray"
                       :data-text-field="'text'"
                       :data-value-field="'value'">
    </kendo-multiselect>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Albania', value: 1 },
                { text: 'Armenia', value: 2 },
                { text: 'Austria', value: 3 },
                { text: 'Azerbaijan', value: 4 },
                { text: 'Belarus', value: 5 },
                { text: 'Belgium', value: 6 },
                { text: 'Bosnia & Herzegovina', value: 7 },
                { text: 'Croatia', value: 8 },
                { text: 'Cyprus', value: 9 },
                { text: 'Czech Republic', value: 10 },
                { text: 'Denmark', value: 11 },
                { text: 'Estonia', value: 12 },
                { text: 'Finland', value: 13 },
                { text: 'France', value: 14 },
                { text: 'Georgia', value: 15 },
                { text: 'Germany', value: 16 },
                { text: 'Greece', value: 17 }
            ]
        }
    }
})

In this article