All Components

Keyboard Navigation

The keyboard navigation of the ListView is always available.

The ListView supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Alt+w Focuses the ListView.
Up Arrow Navigates to the previous item.
Left Arrow Navigates to the previous item.
Down Arrow Navigates to the next item.
Right Arrow Navigates to the next item.
Home Navigates to the first item.
End Navigates to the last item.
Enter Enters the edit mode or applies the changes.
Esc Exits the edit mode and cancels the changes.
Tab Tabs away from the ListView to the next focusable page element.
Shift+Tab Tabs away from the ListView to the previous focusable page element.
Space Selects an item.
<div id="vueapp" class="vue-app">
    <button class="k-button" @click="addRecord">Add new record</button>

    <kendo-datasource ref="datasource1"
      :page-size="4"
      :batch="true"
      :transport-read-url="crudServiceBaseUrl + '/Products'"
      :transport-read-data-type="'jsonp'"
      :transport-update-url="crudServiceBaseUrl + '/Products/Update'"
      :transport-update-data-type="'jsonp'"
      :transport-destroy-url="crudServiceBaseUrl + '/Products/Destroy'"
      :transport-destroy-data-type="'jsonp'"
      :transport-create-url="crudServiceBaseUrl + '/Products/Create'"
      :transport-create-data-type="'jsonp'"
      :parameter-map="parameterMap"
      :schema-model-id="'ProductID'"
      :schema-model-fields="schemaModelFields">
    </kendo-datasource>

    <kendo-listview ref="listView"
                    :data-source-ref="'datasource1'"
                    :template="itemTemplate"
                    :edit-template="editTemplate"
                    :selectable="true"
                    :navigatable="true">
    </kendo-listview>
</div>

<style>
        .product-view
        {
            float: left;
            width: 50%;
            height: 300px;
            box-sizing: border-box;
            border-top: 0;
            position: relative;
        }
        .product-view:nth-child(even) {
            border-left-width: 0;
        }
        .product-view dl
        {
            margin: 10px 10px 0;
            padding: 0;
            overflow: hidden;
        }
        .product-view dt, dd
        {
            margin: 0;
            padding: 0;
            width: 100%;
            line-height: 24px;
            font-size: 18px;
        }
        .product-view dt
        {
            font-size: 11px;
            height: 16px;
            line-height: 16px;
            text-transform: uppercase;
            opacity: 0.5;
        }

        .product-view dd
        {
            height: 46px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }

        .product-view dd .k-widget,
        .product-view dd .k-textbox {
            font-size: 14px;
        }
        #example .k-listview
        {
            border-width: 1px 0 0;
            padding: 0;
            overflow: hidden;
            min-height: 298px;
        }
        .edit-buttons
        {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: right;
            padding: 5px;
            background-color: rgba(0,0,0,0.1);
        }
        .k-pager-wrap
        {
            border-top: 0;
        }
        span.k-invalid-msg
        {
            position: absolute;
            margin-left: 6px;
        }

        .k-add-button {
            margin-bottom: 2em;
        }
    </style>
Vue.use(ListViewInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    created: function() {
        window.addEventListener('keydown', this.down);
    },
    data () {
        return {
            crudServiceBaseUrl: 'https://demos.telerik.com/kendo-ui/service',
            itemTemplate: `<div class="product-view k-widget">
            <dl>
                <dt>Product Name</dt>
                <dd>#:ProductName#</dd>
                <dt>Unit Price</dt>
                <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                <dt>Units In Stock</dt>
                <dd>#:UnitsInStock#</dd>
                <dt>Discontinued</dt>
                <dd>#:Discontinued#</dd>
            </dl>
            <div class="edit-buttons">
                <a class="k-button k-edit-button" href="\\\\#"><span class="k-icon k-i-edit"></span></a>
                <a class="k-button k-delete-button" href="\\\\#"><span class="k-icon k-i-close"></span></a>
            </div>
        </div>`,
            editTemplate: `<div class="product-view k-widget">
                    <dl>
                        <dt>Product Name</dt>
                        <dd>
                            <input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
                            <span data-for="ProductName" class="k-invalid-msg"></span>
                        </dd>
                        <dt>Unit Price</dt>
                        <dd>
                            <input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />
                            <span data-for="UnitPrice" class="k-invalid-msg"></span>
                        </dd>
                        <dt>Units In Stock</dt>
                        <dd>
                            <input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />
                            <span data-for="UnitsInStock" class="k-invalid-msg"></span>
                        </dd>
                        <dt>Discontinued</dt>
                        <dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>
                    </dl>
                    <div class="edit-buttons">
                        <a class="k-button k-update-button" href="\\\\#"><span class="k-icon k-i-check"></span></a>
                        <a class="k-button k-cancel-button" href="\\\\#"><span class="k-icon k-i-cancel"></span></a>
                    </div>
                </div>`,
            schemaModelFields: {
                ProductID: { editable: false, nullable: true },
                ProductName: 'ProductName',
                UnitPrice: { type: 'number' },
                Discontinued: { type: 'boolean' },
                UnitsInStock: { type: 'number' }
            }
        }
    },
    methods: {
         down (ev) {
            if (ev.altKey && ev.keyCode === 87 /* w */) {
                this.$refs.listView.kendoWidget().element.focus();
            }
        },
        addRecord () {
            this.$refs.listView.kendoWidget().add();
        },
        parameterMap (options, operation) {
            if (operation !== 'read' && options.models) {
                return {models: kendo.stringify(options.models)};
            }
        }
    }
})
In this article