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.
Thanks
<!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>1 Answer, 1 is accepted
0
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!