This is what I have. currentGrid is set elsewhere since I have numerous grids on the page and only wanted to have the code once.
$(currentGrid).treegrid('getPanel').attr('tabindex','-1').bind('keydown', function(e) {
// Only allow the key up/key down events when the user is not editing the row.
if (editingId == undefined) {
// Prevent the default key press action
e.preventDefault();
// Up key - move to the previous row
if (e.keyCode === 38) {
var $curGrid = $(currentGrid),
row = $curGrid.treegrid('getSelected'),
gridData = $curGrid.treegrid('getData'),
i = 0,
found = false,
previousRowId = 0;
while ((i < gridData.length) && !found) {
var gridRow = gridData[i];
if (i === 0) {
previousRowId = gridRow.id;
}
if (gridRow.children) {
var j = 0;
while (j < gridRow.children.length && !found) {
child = gridRow.children[j];
if (child.id === row.id) {
found = true;
} else {
previousRowId = child.id;
}
j++;
}
} else if (gridRow.id === row.id) {
found = true;
} else {
previousRowId = gridRow.id;
}
i++;
}
if (found) {
$curGrid.treegrid('select', previousRowId);
}
// Down key - move to the next row
} else if (e.keyCode === 40) {
var $curGrid = $(currentGrid),
row = $curGrid.treegrid('getSelected'),
gridData = $curGrid.treegrid('getData'),
i = gridData.length - 1,
found = false,
previousRowId = 0;
while ((i >= 0 ) && !found) {
var gridRow = gridData[i];
if (i === gridData.length - 1) {
previousRowId = gridRow.id;
}
if (gridRow.children) {
var j = gridRow.children.length - 1;
while (j >= 0 && !found) {
child = gridRow.children[j];
if (child.id === row.id) {
found = true;
} else {
previousRowId = child.id;
}
j--;
}
} else if (gridRow.id === row.id) {
found = true;
} else {
previousRowId = gridRow.id;
}
i--;
}
if (found) {
$curGrid.treegrid('select', previousRowId);
}
// space key - edit the row
} else if (e.keyCode === 32) {
editRow(batchDateDeptNum, false);
}
}
});