ComponentOne GridView for ASP.NET WebForms
Client-Side Tutorials / Handling client side Key events
In This Topic
    Handling client side Key events
    In This Topic

    This topic demonstrates how to enable handling key events, in C1GridView control, at client side. Since C1GridView does not have any keyboard events of its own, you need to handle its OnClientBeforeCellEdit event and define the keyup event for each cell. Thus, if you make a change in any cell then this event will fire, and you can check the content entered by the end user.

    Use the following code in OnClientBeforeCellEdit event in the source view:

     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, you retrieve the key entered by the user with the help of the event, and if it is a letter or a number then the focus moves to the next cell. Similarly, you can check the user input and can take corresponding action on the basis of same.