Keyboard Navigation

The keyboard support of the DropDownList is always available.

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

The DropDownList, its button, and drop-down elements support the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Up Arrow  Highlights the previous item.
 Left Arrow Highlights the previous item.
 Down Arrow Highlights the next item.
 Right Arrow  Highlights the next item.
 Home  Selects the first item in the list.
 End  Selects the last item in the list.
 Page Up  Scrolls the popup up.
 Page Down  Scrolls the popup down.
 Enter  Selects the highlighted item.
 Esc  Closes the popup.
 Space 
  • Opens the popup.
  • Selects the highlighted item.
 Alt+Down Arrow Opens the popup.
 Alt+Up Arrow  Closes the popup.
<div id="vueapp" class="vue-app">
    <kendo-dropdownlist :data-source="dataSourceArray"
                        :data-text-field="'text'"
                        :data-value-field="'value'">
    </kendo-dropdownlist>
</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