I haven’t had a chance to tidy up the following code.

function WebGrid1_OnKeyDown(controlId, tblName, rowIndex, cellIndex){
    var WebGrid1 = ISGetObject(controlId);
            
    // check if user press the arrow keys
    if (event.keyCode > 36 && event.keyCode < 41)
    {
        var selectedRow = WebGrid1.GetSelectedObject().GetRowObject();
        // check if selected row's type is Record
        if (selectedRow.Type == "Record")
        {
            if (event.keyCode == 40)
            {
                if (selectedRow.Position != WebGrid1.TotalRows - 1)
                    var rowIndex = selectedRow.Position + 1;
                else
                    var rowIndex = selectedRow.Position;
                        
                var selectedCell = WebGrid1.RootTable.GetRow(rowIndex).GetCells()[GetCurrentActiveCellIndex(WebGrid1) - 1];
            }
            else if (event.keyCode == 38)
            {
                if (selectedRow.Position != 0)
                    var rowIndex = selectedRow.Position - 1;
                else
                    var rowIndex = selectedRow.Position;
                var selectedCell = WebGrid1.RootTable.GetRow(rowIndex).GetCells()[GetCurrentActiveCellIndex(WebGrid1) - 1];
            }
            else
                var selectedCell = selectedRow.GetCells()[GetCurrentActiveCellIndex(WebGrid1) - 1];
            // check if selected cell is editable or not
            if (selectedCell.IsEditable())
            {
                window.setTimeout(function () { selectedCell.ActivateEdit(); }, 100);
            }
        }
    }
    return true;
}
function GetCurrentActiveCellIndex(gridObj)
{
    var grid = ISGetObject(gridObj);
    var activeCell = grid.GetActiveEditCell();
    var curCellIndex = activeCell.cellIndex;
    if (event.keyCode == 37 || event.keyCode == 39)
    {
        if (event.keyCode == 37 && curCellIndex != null)
            curCellIndex = curCellIndex - 1;
        if (event.keyCode == 39 && curCellIndex != 6)
            curCellIndex = curCellIndex + 1;
    }
    return curCellIndex;
}

Please attach the WebGrid1_OnKeyDown JS function to WebGrid’s OnKeyDown client-side event. The JS code will manually activate edit mode on each selected cell when user navigates using the arrow key on keyboard.

Please let us know whether this helps or not.

Thanks Yudi. This works when grid does not have child table.  How to calculate the ColumnIdx when the grid uses child table?

I test the JS function on a hierarchical WebGrid and find that when user press ‘left’ or ‘right’ key from keyboard, the JS function does activate edit on the incorrect cell. Based on my test result, the term “incorrect cell” is the cell on the right-side of the correct one.

If you are dealing with the same problem, please modify following line in the WebGrid1_OnKeyDown JS function.

function WebGrid1_OnKeyDown(controlId, tblName, rowIndex, cellIndex)
{
    var WebGrid1 = ISGetObject(controlId);
    if (event.keyCode > 36 && event.keyCode < 41)
    {
        var selectedRow = WebGrid1.GetSelectedObject().GetRowObject();
                
        // check if selected row's type is Record
        if (selectedRow.Type == "Record")
        {
            if (event.keyCode == 40)
            {
                ...
            }
            // if 'up' key is pressed
            else if (event.keyCode == 38)
            {
                ...
            }
                    
            // the original is:
            // else
            //     var selectedCell = selectedRow.GetCells()[GetCurrentActiveCellIndex(WebGrid1) - 1];
            else
                var selectedCell = selectedRow.GetCells()[GetCurrentActiveCellIndex(WebGrid1) - 2];
            ...
        }
    }
    return true;
}

The reason why we need to modify that line is that WebGrid with hierarchical structure has different layout compared to the non-hierarchical one. It has one column added on left side which is used to place the expand/collapse child-table button.

Hope this helps.