Many User would like to mimic the behavior of Microsoft Excel while editing some cells contents. In MS.Excel, after users modified a cell content followed by pressing Enter key the next cell at the next row (rowIndex+1) at the same column will be directly highlighted.

In this topic, you will learn the how to reconfigure the "Enter" key function on EditMode.

To reconfigure the "Enter" key functions on EditMode.

Bind WebGrid to Hierarchical ISDataSource (using NorthWind Customers and Orders table)
Set AllowEdit to true.
Add OnEditKeyDown client side event:

JavaScript

Copy Code

function WebGrid1_OnEditKeyDown(controlId)
{
   if(event.keyCode == 13) {
    //cancel the event as it'll be handled manually
    event.returnValue = false;
   
    var grid = ISGetObject("WebGrid1");
   
    //get currently active edit cell
    var ac = grid.GetActiveEditCell();
   
    if(ac.rowElement.type == "Record") {
     //get the table object
     var tbl = grid.Tables[ac.tblName];
     grid.ExitEdit(1,0,0) // exit and update the row if dirty

     //find out if the table of current row is parent
     var isParent = (tbl.GetChildTables().length > 0)?true : false;
    
     window.setTimeout(function() {SelectNext(ac, isParent);},500);
    
     //you can try to remove this line if you receive a javascript error
     return false;
    }
   }
   return true;
  }
 
  function SelectNext(ac, isParent) {
   var curRow = ac.rowElement;
   var tblElm = wgGetTable(curRow);
   var curRowIndex = curRow.rowIndex;
  
   //if a table is a parent, the index numbering increases by 2
   var i = (isParent)? 2 : 1;
  
   //check if current row is the last row of the table
   if(curRowIndex < tblElm.rows.length-i){
    //get destination now
    var destRow = wgGetRowByPosition(tblElm, curRowIndex+i);
   
    //highlight the destination row
    //wgHighlightROw(destRow);
   
    //get the column name
    var cellName = wgGetColNameByCell(ac.element);
   
    //get the destination cell
    var destCell = wgGetCellByName(destRow, cellName);
  
    //select nextRow and highlight the destination cell
    window.setTimeout(function() { MoveRow(destRow,destCell);}, 500);
   
   }
  }
 
  function MoveRow(destRow, destCell)
  {
   wgGetRowByElement(destRow).Select();
   wgHighlightEditCell(destCell);
  }

Intersoft WebGrid Documentation
How-to: Reconfigure the 'Enter' key functions on EditMode
See Also Send comments on this topic.

To reconfigure the "Enter" key functions on EditMode.

See Also