Keyboard Navigation

The keyboard support of the DropDownTree is always available.

The DropDownTree supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Access Key+w  Focuses the DropDownTree.

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

SHORTCUT DESCRIPTION
Right Arrow Highlights the next selected item.
Left Arrow Highlights the previously selected item.
Home Highlights the first selected item.
End Highlights the last selected item.
Delete Deletes the highlighted item.
Backspace Deletes the highlighted item or the last item.
Alt+Down Arrow Opens the popup.
Esc Clears all items.

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

SHORTCUT DESCRIPTION
Down Arrow Highlights the next item.
Up Arrow Highlights the previous item.
Home Highlights the first item in the popup.
End Highlights the last item in the popup.
Alt+Up Arrow Closes the popup.
Esc Closes the popup.

The DropDownTree supports the following keyboard shortcuts for navigation:

SHORTCUT DESCRIPTION
Down Arrow Highlights the next item.
Up Arrow Highlights the previous item.
Left Arrow Collapses the item.
Right Arrow Expands the item.
Home Highlights the first item in the list.
End Highlights the last item in the list.
Enter Selects the highlighted item when the DropDownTree does not render checkboxes.
Space Checks the highlighted item when the DropDownTree renders checkboxes.
<div id="vueapp" class="vue-app">
        <div>
            <kendo-dropdowntree ref="dropdowntree"
                    :data-source="dataSource"
                    :filter="'contains'"
                    style="width: 300px;">
            </kendo-dropdowntree>
        </div>
</div>

<style>
    #treeview .k-sprite {
        background-image: url("https://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
    }

    .rootfolder { background-position: 0 0; }
    .folder     { background-position: 0 -16px; }
    .pdf        { background-position: 0 -32px; }
    .html       { background-position: 0 -48px; }
    .image      { background-position: 0 -64px; }
</style>
Vue.use(DropDownTreeInstaller);

new Vue({
    el: "#vueapp",
    created: function() {
        window.addEventListener('keydown', this.down);
    },
    data () {
        return {
            dataSource: [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                            { id: 3, text: "about.html", spriteCssClass: "html" },
                            { id: 4, text: "index.html", spriteCssClass: "html" },
                            { id: 5, text: "logo.png", spriteCssClass: "image" }
                        ]
                    },
                    {
                        id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                            { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                            { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                            { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }]
        }
    },
    methods: {
        down (ev) {
            if (ev.altKey && ev.keyCode === 87 /* w */) {
                this.$refs.treeview.kendoWidget().wrapper.focus();
            }
        }
    }
})

In this article