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

2008. 2. 3. 19:39 개발언어/3rd Part
내가 찾는게 이런것이였을까? 그리드 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:


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

//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)

See Also