Keyboard Navigation

The keyboard navigation of the TreeView is always available.

The TreeView supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Alt+w If an item is focused, highlights the previous item.
Up Arrow Highlights the previous item.
Left Arrow Collapses the item.
Down Arrow Highlights the next 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.
<div id="vueapp" class="vue-app">
        <div>
            <kendo-treeview ref="treeview"
                            :data-source="dataSource">
            </kendo-treeview>
        </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(TreeViewInstaller);

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