How-to: Reconfigure the "Enter" key functions on EditMode

내가 찾는게 이런것이였을까? 그리드 EditMode에서 엔터시 옆으로 이동하는 방법이다.

그리드의 EditMode일때 Enter Key(아스키 코드13)은 잘 동작하지 않는다.
해결방법은 Enter Key를 재설정하는 방법 뿐이다.

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.

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

~

[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);
  }  
[/CODE]



See Also
Tasks
Walkthrough: Updating the changes in WebGrid to physical Database
How-to: Calculate a cell after a value is filled
How-to: Maintain the new row's value when there is error during adding action
Concepts
Editing Environment
References
AllowEdit Property
OnEditKeyDown Property