This is a migrated thread and some comments may be shown as answers.

Bug? Kendo Grid keyboard navigation

1 Answer 235 Views

Grid

This is a migrated thread and some comments may be shown as answers.

achu asked on 05 Feb 2016, 08:14 PM

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>

<base href="http://demos.telerik.com/kendo-ui/grid/keyboard-navigation">

<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>

</body>

</html>

Thanks

Bug? Kendo Grid keyboard navigation

1 Answer, 1 is accepted