HOWTO:How to make the WebGrid work like an Excel sheet

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;     } }

Related Articles

 

HOWTO: How to cancel certain keystrokes (KB02898)