Tabbed Navigation in WijGrid

WijGrid is undoubtedly, the most commonly used and popular widget offered by Wijmo. With its flexible structure and ability to support different customizations, it is a great tool to present data in a tabular form to the end users over the web. If we talk about its common features like filtering, sorting, paging etc then we already have nice online samples available which showcase these features. However the motive of this blog article is to present a customization which offers an out of the box solution. Many users like to navigate through controls using their keyboard. This blog article targets those set of users and we will see how we can navigate through each WijGrid cell only using the TAB key available on our keyboard. In addition to this, during the navigation from one cell to another, we will also provide the user, an option to edit the cell content. Let us get an idea of what exactly we are doing here: So as you may have noticed, we are just using the TAB key for navigation. Let us now concentrate on the steps required to achieve this functionality.

IMPLEMENTATION

Basically the idea here is to find the underlying div tag in the WijGrid cell and then trap its 'keydown' event. This will take care of the navigation; however to bring the cell into edit mode, we will force the _'_click' event on the div. Also as a final check we will end the edit once the last WijGrid cell is reached. So here is the underlying code used for this implementation:

 $("#demo tr td div").on("keydown", $(this), function (e) {  
     var keyCode = e.keyCode || e.which;  
     if (keyCode === 9) {  
         var currentDiv = e.target;  
         if ($(currentDiv).parents("td").next("td").length != 0) {  
             $(currentDiv).parents("td").next("td").find("div").click();  
         }  
         else {  
             $(currentDiv).parents("td").parents("tr").next("tr").children("td").first("td").find("div").click();  
             if ($(currentDiv).is(':last-child')) {  
                 $("#demo").wijgrid("endEdit");  
             }  
         }  
         return false;  
     }  
 });

So we are all set. Simply throw this code on your HTML file containing WijGrid and you will be good to go. A sample application showcasing this implementation can be downloaded from the link below. Download Sample