Bug? Kendo Grid keyboard navigation

2 posts, 0 answers
  1. achu
    achu avatar
    8 posts
    Member since:
    Jan 2016

    Posted 05 Feb 2016 Link to this post

    Lets say I have a list of 1000 items and I am trying to navigate through the grid using keyboard arrows UP/DOWN.When I reach the last item on the page and use keyboard DOWN arrow doesn't load the next items in the grid nor the UP arrow loads the previous data.
    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
     
        <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
    </head>
    <body>
            <script src="../content/shared/js/people.js"></script>
     
            <div id="example">
     
                <div id="grid"></div>
     
                <script>
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            dataSource: {
                                data: createRandomData(50),
                                group: [{ field: "FirstName" }],
                                pageSize: 5,
                                schema: {
                                    model: {
                                        id: "Id",
                                        fields: {
                                            FirstName: { type: "string" },
                                            LastName: { type: "string" },
                                            City: { type: "string" },
                                            Age: { type: "number" },
                                            BirthDate: { type: "date" }
                                        }
                                    }
                                }
                            },
                            selectable: "multiple cell",
                            navigatable: true,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                scrollable: {
                   virtual: true
               },
                            columns: [ {
                                    field: "FirstName",
                                    width: 120,
                                    title: "First Name"
                                } , {
                                    field: "LastName",
                                    width: 120,
                                    title: "Last Name"
                                } , {
                                    width: 120,
                                    field: "City"
                                } , {
                                    field: "BirthDate",
                                    title: "Birth Date",
                                    template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                                } , {
                                    width: 80,
                                    field: "Age"
                                }
                            ]
                        });
     
                        $(document.body).keydown(function(e) {
                            if (e.altKey && e.keyCode == 87) {
                                $("#grid").data("kendoGrid").table.focus();
                            }
                        });
                    });
                </script>
     
                <div class="box wide">
                    <div class="box-col">
                    <h4>Focus</h4>
                    <ul class="keyboard-legend" style="margin-bottom: 1em;">
                        <li>
                            <span class="button-preview">
                                <span class="key-button leftAlign">Alt</span>
                                +
                                <span class="key-button">w</span>
                            </span>
                            <span class="button-descr">
                                focuses the widget
                            </span>
                        </li>
                    </ul>
     
                    <h4>Actions applied on Grid header</h4>
                    <ul class="keyboard-legend">
                        <li>
                            <span class="button-preview">
                                <span class="key-button">Enter</span>
                            </span>
                            <span class="button-descr">
                                sort by the column
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button leftAlign">Alt</span>
                                +
                                <span class="key-button">Down</span>
                            </span>
                            <span class="button-descr">
                                opens the filter menu
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button">Esc</span>
                            </span>
                            <span class="button-descr">
                                closes the filter menu
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button">Tab</span>
                            </span>
                            <span class="button-descr">
                                navigates through the elements in the filter menu(default browser behavior)
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button leftAlign">Shift</span>
                                +
                                <span class="key-button">Tab</span>
                            </span>
                            <span class="button-descr">
                                same as Tab, but in reverse order
                            </span>
                        </li>
                    </ul>
                    </div>
     
                    <div class="box-col">
                    <h4>Actions applied on Grid data table</h4>
                    <ul class="keyboard-legend">
                        <li>
                            <span class="button-preview">
                                <span class="key-button wider">Arrow Keys</span>
                            </span>
                            <span class="button-descr">
                                to navigate over the cells
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button">Enter</span>
                            </span>
                            <span class="button-descr">
                                on group row will toggle expand/collapse
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button wider">Page Up</span>
                            </span>
                            <span class="button-descr">
                                pages on previouse page
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button wider">Page Down</span>
                            </span>
                            <span class="button-descr">
                                pages on next page
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button">Space</span>
                            </span>
                            <span class="button-descr">
                                selects currently highlighted cell
                            </span>
                        </li>
                        <li>
                            <span class="button-preview">
                                <span class="key-button leftAlign">Ctrl</span>
                                +
                                <span class="key-button">Space</span>
                            </span>
                            <span class="button-descr">
                                same as Space, but perists previously selected cells(only for selection mode "multiple")
                            </span>
                        </li>
                    </ul>
                    </div>
                </div>
            </div>
     
    </body>
    </html>
    Thanks
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 Feb 2016 Link to this post

    Hello achu,

     

    I tried to replicate this problem, but with my http://dojo.telerik.com/EGUYu example both down and up keys are working as expected. Is there something that I am missing in order to replicate the described issue? 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top