How To Implement Keyboard Navigation In Kendo Grid

Gowtham K
8y
4.5k
0
0

Article

Introduction

This article tells about how to implement the Keyboard Navigation in Kendo Grid, using ASP.NET WEB API. The application is developed, using Kendo UI Framework and ASP.NET Web API

Prerequisites

Basic knowledge of ASP.NET Web API and Kendo UI Framework.

This article flows as follows,

Creating an ASP.NET Web API application
Creating a Controller.
Testing the REST API
Implementing the Kendo Grid with keyboard navigation using REST API.

Creating an ASP.NET WEB API application

Create a Web API application using an installed web template in Visual Studio as in the following figures. In my case, I named the application as "GridNavigation".

Creating model classes

In the Solution Explorer, right click the Models folder, select Add, then Class and name it as Employee.cs.

public class Employee
{
public Employee(int Id, string Name, string Designation)
{
this.EmployeeID = Id;
this.EmployeeName = Name;
this.Designation = Designation;
}
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string Designation { get; set; }
}

Creating a Controller

Right click on the Controller folder and add a new Web API 2- Empty controller, as shown in the following figure 3. In my case, I named it as EmployeeController.cs.

EmployeeController.cs

[RoutePrefix("api/Employee")]
public class EmployeeController : ApiController
{
[HttpGet]
[AllowAnonymous]
[Route("EmployeeList")]
public HttpResponseMessage GetEmployee()
{
try
{
List<Employee> EmpLists = new List<Employee>();
EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst"));
EmpLists.Add(new Employee(2, "Krishn Mahato", "Development"));
EmpLists.Add(new Employee(3, "Bob Ross", "Testing"));
EmpLists.Add(new Employee(4, "Steve Davis", "Development"));
EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure"));
EmpLists.Add(new Employee(6, "James Anderson", "HR"));
return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);
}
catch (Exception ex)
{
return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
}
}
}

The above Employee Controller Action GetEmployee will return a list of employees.

Testing the REST API

Test the API using the POSTMAN/Fiddler, as in the following figure 4.

API End Point /api/Employee/EmployeeList
Type GET

The API is working fine. Now, it's ready to consume.

Implementing the Kendo Grid with navigation using the REST API

Creating a HTML page

Create a new HTML page in the project.

Design

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>Kendo Grid Navigation</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<h3> Kendo Grid Navigation:</h3>
<br/>
<br />
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/api/Employee/EmployeeList"
},
schema: {
model: {
fields: {
EmployeeID: { type: "number" },
EmployeeName: { type: "string" },
Designation: { type: "string" },
}
}
},
},
height: 550,
filterable: true,
selectable: "multiple cell",
navigatable: true,
sortable: true,
pageable: true,
columns: [{
field:"EmployeeID",
filterable: false
},
{
field: "EmployeeName",
title: "Name",
}, {
field: "Designation",
title: "Designation"
}
]
});
});
</script>
</div>
</body>
</html>

By default, the keyboard navigation is disabled in Kendo Grid. Now, we have enabled it by setting the navigable property as true from the above code

Result

There are different key actions that you can perform in Kendo Grid, as mentioned below.

Alt+W ->focuses the widget.

Action applied on Grid header

Enter -> Sort by column
Alt+Down->opens the filter menu
Esc -> close the filter menu
Tab -> navigates through the elements in the filter menu(default browser behavior)
Shift + Tab -> same as Tab, but in reverse order

Action applied on Grid data table

Arrow Keys to navigate over the cells
Enter on group row will toggle expand/collapse
Page Up -> pages on previous page
Page Down -> pages on next page
Space -> selects currently highlighted cell
Ctrl + Space -> same as Space, but persists previously selected cells(only for selection mode "multiple")

References