Wrapper Components / Grid (wrapper)

Keyboard Navigation

The keyboard support of the Grid is always available.

To apply the keyboard shortcuts, focus the Kendo UI Grid wrapper for Vue by clicking the example area and pressing the Tab key.

The following keyboard shortcuts apply to the header of the Kendo UI Data Grid wrapper for Vue.

SHORTCUT DESCRIPTION
 Enter  Sort by the column.
 Alt+Down  Opens the filter menu.
 Esc  Closes the filter menu.
 Tab  (Default browser behavior) Navigates through the elements in the filter menu.
 Shift+Tab Same as Tab, but in reverse order.
 Ctrl+Left Arrow Reorders the column with the previous one.
 Ctrl+Right Arrow Reorders the column with the next one.

The following keyboard shortcuts apply to the data table of the Kendo UI Data Grid wrapper for Vue.

SHORTCUT DESCRIPTION
 Arrow Keys  Navigates over the cells.
 Enter  Toggles the expand and collapse state on group row.
 Page Up  Navigates to the previous page.
 Page Down  navigates to the next page.
 Space  Selects the row which holds the currently highlighted cell.
 Ctrl+Space  Selects or deselects the current row while persisting the previously selected rows (only for the multiple selection mode).
 Shift+Space  Performs range selection. Selects all the rows between the last selected one (with SPACE or mouse-click) and the one which holds the focused cell.
 Shift+Arrow Keys  Adds the row which holds the focused cell to the selection (only for the multiple selection mode).
 Ctrl+Home  Focuses the first focusable element inside the body.
 Ctrl+End  Focuses the last focusable cell in the last row.
 Home  Focuses the first focusable cell in the row.
 End  Focuses the last focusable cell in the row. 
<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'"
                      :type="'odata'"
                      :page-size='5'
                      :group-field="'City'"
                      :server-paging="true"
                      :server-sorting="true"
                      :server-filtering="true">
    </kendo-datasource>

    <kendo-grid :data-source-ref="'datasource1'"
                :selectable="'multiple row'"
                :navigatable="true"
                :filterable="true"
                :sortable="true"
                :pageable="true"
                :reorderable="true">
        <kendo-grid-column :field="'FirstName'"
                           :title="'First Name'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'LastName'"
                           :title="'Last Name'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Country'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'City'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Title'"
                           :width="180"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp'
})

In this article