Keyboard Navigation

The keyboard navigation of the TreeList is always available.

The data table of the TreeList supports the following keyboard shortcuts:

Arrow Keys Navigates between the cells.
Space Selects the row with the currently highlighted cell.
  • Selects or deselects the current row.
  • Persists the previously selected rows.
  • Performs range selection.
  • Selects all rows between the last selected one.
Shift+Arrow Keys Adds the row of the focused cell to the selection.
Enter or F2 Sets the item in edit mode. If pressed on a command column, the shortcut focuses the first focusable element inside it.
Esc Cancels the edit or, if an element inside a cell is focused, returns the focus to the table.
Alt+Right Arrow Expands the current item.
Alt+Left Arrow Collapses the current item.
Ctrl+Home Focuses the first focusable element inside the body.
Ctrl+End Focuses the last focusable element inside the body.
Home Focuses the first focusable cell in the row.
End Focuses the last focusable cell in the row.
<div id="vueapp" class="vue-app">
    <script id="photo-template" type="text/x-kendo-template">
        <div class='employee-photo'
            style='background-image: url(;'></div>
        <div class='employee-name'>#: FirstName #</div>
    <kendo-treelistdatasource ref="remoteDataSource"

    <kendo-treelist data-source-ref="remoteDataSource"
                    :selectable="'multiple, row'"
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="90"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" :width="130"></kendo-treelist-column>
        <kendo-treelist-column :field="'Phone'" :title="'Phone'" :width="130"></kendo-treelist-column>
        <kendo-treelist-column :title="'Edit'" :command="['edit', 'destroy']" :width="200"></kendo-treelist-column>

new Vue({
    el: "#vueapp",
        data: {
            model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                    EmployeeId: { type: "number", editable: false, nullable: false },
                    ReportsTo: { nullable: true, type: "number" },
                    FirstName: { validation: { required: true } },
                    LastName: { validation: { required: true } },
                    HireDate: { type: "date" },
                    Phone: { type: "string" },
                    HireDate: { type: "date" },
                    BirthDate: { type: "date" },
                    Extension: { type: "number", validation: { min: 0, required: true } },
                    Position: { type: "string" }
                expanded: true
        methods: {
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};

In this article