Handling Client Side Key events of Wijmo Gridview

Wijmo Gridview does not have any keyboard events but sometimes, we may have a requirement where we need to perform any action on the basis of the key pressed by the end user. In this blog, we will see how we can fulfill the above requirement and can handle the key events of Wijmo Gridview. The first thing we need is a Gridview with data so we have bound the Gridview with Customers table of the Northwind database. Here is the code for same:

<wijmo:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" AllowPaging="true"  
 ClientEditingUpdateMode="Manual" ClientSelectionMode="SingleCell" AllowClientEditing="true"  
 DataKeyNames="CustomerID" DataSourceID="AccessDataSource1" ShowFooter="False"  
 OnClientBeforeCellEdit="BeforeCellEdit" HighlightCurrentCell="True">  
    <Columns>  
       <wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"  
    SortExpression="CustomerID">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="Address" HeaderText="Address" SortExpression="Address">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="Region" HeaderText="Region" SortExpression="Region">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="Fax" HeaderText="Fax" SortExpression="Fax">  
       </wijmo:C1BoundField>  
    </Columns>  
 </wijmo:C1GridView>

Since, Gridview does not have any keyboard events of its own so we need to handle its OnClientBeforeCellEdit event and define the keyup event for each cell. Thereby, if we make any change in any cell then this event will fire and we can check the content entered by the end user. You may use the following code in OnClientBeforeCellEdit event :

function BeforeCellEdit(e, args) {  
    var cell = args.cell;  
    var grid = $("#<%=C1GridView1.ClientID %>");  

    cell.container().keyup(function (event) {  
    var count = 0;  
    var key = event.which;  

    if (key >= 65 && key <= 90) {  
       count = 1;  
    }  
    else if (key >= 48 && key <= 57) {  
       count = 1;  
    }  

    if (count == 1) {  
       $(grid).c1gridview("endEdit");  
       var row = cell.rowIndex();  
       var col = cell.cellIndex();  
       $(grid).c1gridview("currentCell", col + 1, row);  
    }  
   }

In the above code, we have retrieved the key entered by the user with the help of event.which and if it is an alphabet or number then we are moving the focus to the next cell. Similarly, you can check the user input and can take corresponding action on the basis of same. A complete sample demonstrating the same is attached below. Download Sample