All Components

Keyboard Navigation

The keyboard navigation of the TreeList is always available.

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

SHORTCUT DESCRIPTION
Arrow Keys Navigates between the cells.
Space Selects the row with the currently highlighted cell.
Ctrl+Space
  • Selects or deselects the current row.
  • Persists the previously selected rows.
Shift+Space
  • 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(https://demos.telerik.com/kendo-ui/content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
        <div class='employee-name'>#: FirstName #</div>
    </script>
    <kendo-treelistdatasource ref="remoteDataSource"
                              :batch="true"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All'"
                              :transport-read-data-type="'jsonp'"
                              :transport-update-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Update'"
                              :transport-update-data-type="'jsonp'"
                              :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Destroy'"
                              :transport-destroy-data-type="'jsonp'"
                              :transport-create-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Create'"
                              :transport-create-data-type="'jsonp'"
                              :transport-parameter-map="parameterMap"
                              :schema-model="model">
    </kendo-treelistdatasource>

    <kendo-treelist data-source-ref="remoteDataSource"
                    :toolbar="['create']"
                    :height="'540px'"
                    :editable="'true'"
                    :selectable="'multiple, row'"
                    :navigatable="'true'">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="180"
                               :expandable="true">
        </kendo-treelist-column>
        <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>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

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