Intersoft Community - WebGrid Enterprise - How to activate edit mode

How to activate edit mode

yudi — Thu, 24 Oct 2013 03:45:40 GMT

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.

How to activate edit mode

luwen — Mon, 21 Oct 2013 17:32:25 GMT

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

How to activate edit mode

yudi — Wed, 16 Oct 2013 04:53:49 GMT

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.

How to activate edit mode

luwen — Mon, 14 Oct 2013 18:05:19 GMT

Hi,

I use a dropdown list inside a webgrid. Our applicaiton allows user to use 4 arrow keys to move the cursor. The code works fine except when the cursor comes to a dropdown list column. Your first key stoke is always ignored ( it is used to force the dropdown list into edit mode). How to avoid that?

I attach the screen shot and code. Here is the way to reproduce the problem. Click column "Tav Tax Code"; Press right arrow key, you see the cursor jumps to "Revised Tran Type" Column; press a number, for example 2, the dropdown list turns into edit mode, but the select is not changed; Press 2 again, the selection changed.

Thanks,

Luwen