Post
Ask Question

How To Implement Keyboard Navigation In Kendo Grid

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,

  1. Creating an ASP.NET Web API application
  2. Creating a Controller.
  3. Testing the REST API
  4. 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.

  1. public class Employee  
  2.    {  
  3.        public Employee(int Id, string Name, string Designation)  
  4.        {  
  5.            this.EmployeeID = Id;  
  6.            this.EmployeeName = Name;  
  7.            this.Designation = Designation;  
  8.              
  9.        }  
  10.        public int EmployeeID { get; set; }  
  11.        public string EmployeeName { get; set; }  
  12.        public string Designation { get; set; }  
  13.          
  14.    }  

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 
  1. [RoutePrefix("api/Employee")]  
  2.   public class EmployeeController : ApiController  
  3.   {  
  4.       [HttpGet]  
  5.       [AllowAnonymous]  
  6.       [Route("EmployeeList")]  
  7.       public HttpResponseMessage GetEmployee()  
  8.       {  
  9.           try  
  10.           {  
  11.               List<Employee> EmpLists = new List<Employee>();  
  12.               EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst"));  
  13.               EmpLists.Add(new Employee(2, "Krishn Mahato", "Development"));  
  14.               EmpLists.Add(new Employee(3, "Bob Ross", "Testing"));  
  15.               EmpLists.Add(new Employee(4, "Steve Davis", "Development"));  
  16.               EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure"));  
  17.               EmpLists.Add(new Employee(6, "James Anderson", "HR"));  
  18.               return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);  
  19.           }  
  20.           catch (Exception ex)  
  21.           {  
  22.               return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  23.           }  
  24.       }  
  25.   }  

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head><meta charset="utf-8">  
  4. <title>Kendo Grid Navigation</title>  
  5.   
  6. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">  
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css">  
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css">  
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css">  
  10.   
  11. <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  12. <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script>  
  13. <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>  
  14. <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  15. </head>  
  16. <body>  
  17.     <h3> Kendo Grid Navigation:</h3>  
  18.     <br/>  
  19.     <br />  
  20.     <div id="example">  
  21.         <div id="grid"></div>  
  22.         <script>  
  23.                 $(document).ready(function() {  
  24.                     $("#grid").kendoGrid({  
  25.                         dataSource: {  
  26.                             type: "json",  
  27.                             transport: {  
  28.                                 read: "/api/Employee/EmployeeList"  
  29.                             },  
  30.                             schema: {  
  31.                                 model: {  
  32.                                     fields: {  
  33.                                         EmployeeID: { type: "number" },  
  34.                                         EmployeeName: { type: "string" },  
  35.                                         Designation: { type: "string" },  
  36.                                     }  
  37.                                 }  
  38.                             },  
  39.                               
  40.                         },  
  41.                         height: 550,  
  42.                         filterable: true,  
  43.                         selectable: "multiple cell",  
  44.                         navigatable: true,  
  45.                         sortable: true,  
  46.                         pageable: true,  
  47.                         columns: [{  
  48.                                 field:"EmployeeID",  
  49.                                 filterable: false  
  50.                             },  
  51.                               
  52.                             {  
  53.                                 field: "EmployeeName",  
  54.                                 title: "Name",  
  55.                                   
  56.                             }, {  
  57.                                 field: "Designation",  
  58.                                 title: "Designation"  
  59.                             }  
  60.                         ]  
  61.                     });  
  62.                 });  
  63.         </script>  
  64.     </div>  
  65. </body>  
  66. </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

  • http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
  • http://demos.telerik.com/kendo-ui/grid/keyboard-navigation 

Conclusion

We have seen how to implement the keyboard navigation with Kendo Grid, which is useful to make the widget more user-friendly in the application.

I hope, you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcomed.


Similar Articles