HOWTO:How to make the WebGrid work like an Excel sheet when using the Up, Down, Right and Left arrow keys
http://devcenter.infragistics.com/Support/KnowledgeBaseArticle.aspx?ArticleID=10016
Summary
If you have set the WebGrid's CellClickAction to Edit then as soon as you click on the WebGrid or use the tab keys that particular cell goes into edit mode. After doing so the arrow keys are tied to the editor in that cell and pressing them will only move the cursor within the editor control.
If you are using your WebGrid for editing purposes and want the user to use the keyboard’s arrow keys to move between the cells and be able to edit them, then you can do so by handling the WebGrid’s EditKeyDown client-side event.
Additional Information
The EditKeyDown event will be fired every time the user hits a key while a cell is in edit mode. We make use of this event to see if the user has keyed in an arrow key. If he/she has then we cancel editing on the current cell and move to the next cell according.
If the user hits the up arrow we check if there is a row on top of that row. If a row exists, then we move the user to the cell of same index on the top row. We can do the opposite when the user hits the down key. Similarly, if the user hits the left key we can check if there is a cell to the left of it, if yes then we move the user to the cell on the left. We can do the same for the right arrow key.
Step-By-Step Example
Handle the WebGrid's client side EditKeyDown event handler and use the following javascript code:
In JavaScript:
function UltraWebGrid1_EditKeyDownHandler(gridName, cellId, key){ //Get the cell being edited var cell = igtbl_getCellById(cellId); //Get the row of the cell being edited var row = cell.getRow(); //Key Codes Down = 40, Up = 38, Right = 39, Left = 37 switch(key) { //If Down Key case 40: //Check to see if there is a next row var nextRow = row.getNextRow(); if(nextRow != null) { //End editing of the current cell cell.endEdit(true); //Active and begin edit on the cell below it nextRow.getCell(cell.Index).activate(); nextRow.getCell(cell.Index).beginEdit(); } break; //If up key case 38: //Check to see if there is a previous row var prevRow = row.getPrevRow(); if(prevRow != null) { //End editing of the current cell cell.endEdit(true); //Active and begin edit on the cell above it prevRow.getCell(cell.Index).activate(); prevRow.getCell(cell.Index).beginEdit(); } break; //If right key case 39: //Check to see if there is a next cell in the row var nextCell = cell.getNextCell(); if(nextCell != null) { //End editing of the current cell cell.endEdit(true); //Active and begin edit on the cell to the right nextCell.activate(); nextCell.beginEdit(); } break; //If left key case 37: //Check to see if there is a previous cell in the row var prevCell = cell.getPrevCell(); if(prevCell != null) { //End editing of the current cell cell.endEdit(true); //Active and begin edit on the cell to the left prevCell.activate(); prevCell.beginEdit(); } break; } } |