http://www.intersoftpt.com/Community/WebGrid/the-grid-using-Left-and-Right-Arrow-Keys/

5 replies. Last post: July 20, 2014 10:18 PM by Hans Kristian
Tags :
Sun BennyMember

Hi ,

I want to use left or right key in webgrid, But I just found the keys to move up and down the line of code, I do not know how to move around key column is implemented, could help me write an example, thank you.

The following are the up and down keys code:

function WebGrid1_OnEditKeyDown(controlId) {
            var grid = ISGetObject("WebGrid1");

            var totalRows = grid.TotalRows;
            var curRow = grid.GetSelectedObject().rowIndex;
            var curCell = grid.GetActiveEditCell().cellIndex;

            var curRowEl = grid.RootTable.GetRow(curRow);
            var cell = curRowEl.GetCell(curCell - 1);

            // if ESC key
            if (event.keyCode == 27) {
                cell.Select(true);
            }

            // if ENTER key
            if (event.keyCode == 13) {
                event.keyCode = 40;
            }

            // if UP arrow key
            if (event.keyCode == 38) {
                if (curRow > 0) {
                    keyDownRow(curRow, curRow - 1, curCell - 1);
                }
            }

            //if left arrow key
            if (event.keyCode == 37) {
                //
            }

            //if right arrow key
            if (event.keyCode == 39) {

            }

            // if DOWN arrow key
            else if (event.keyCode == 40) {
                if (curRow < totalRows - 1) {
                    keyDownRow(curRow, curRow + 1, curCell - 1);
                }
            }

            return true;

        }

function keyDownRow(curRow, nextRow, cell) {
            var grid = ISGetObject("WebGrid1");
            var nextRowEl = grid.RootTable.GetRow(nextRow);
            var curRowEl = grid.RootTable.GetRow(curRow);
            var cell1 = nextRowEl.GetCell(cell);
            var cell2 = curRowEl.GetCell(cell);
            grid.SetFocus();
            cell2.Select(true);
            nextRowEl.Select(true);
            cell1.ActivateEdit();
        }

 

All Replies

Hello,

I made a WebGrid page that perhaps similar with your current scenario.

I add JavaScript code that handle Key Up and Key Down event while in edit mode in WebGrid.

If we press Key Up/Down while in editing mode, the cursor will be focus on the next/previous row.

Here’s the JavaScript code:
var intervalObj;
function activateEditMode(grid, curRowIndex, nextRowIndex, columnName, cell) {
    if (nextRowIndex >= 0 && nextRowIndex < grid.TotalRows) {
        var nextRowEl = grid.RootTable.GetRow(nextRowIndex);
        var curRowEl = grid.RootTable.GetRow(curRowIndex);
        var cell1 = nextRowEl.GetCell(cell);
        var cell2 = curRowEl.GetCell(cell);
        grid.SetFocus();
        cell2.Select(true);
        nextRowEl.Select();
        cell1.ActivateEdit();
    }
}

function WebGrid1_OnEditKeyDown(controlId, keyCode)
{
    // get the grid
    var grid = ISGetObject(controlId);
    // get current information about row and cell
    var activeEditCell = grid.GetActiveEditCell();
    var columnName = wgGetColNameByCell(activeEditCell.element);
    var curRow = activeEditCell.rowElement;
    var curRowIndex = curRow.rowIndex;
    var curCell = grid.GetActiveEditCell().cellIndex;


    if (keyCode == 38) { // if up arrow
        grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty
                
        intervalObj = setInterval(function ()
        {
            if (!grid.IsInProgress)
            {
                activateEditMode(grid, curRowIndex, curRowIndex - 1, columnName, curCell - 1);
                clearInterval(intervalObj);
                intervalObj = null;
            }
        }, 5);

    }
            
    else if (keyCode == 40) {  // if down arrow or enter key
        grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty

        intervalObj = setInterval(function ()
        {
            if (!grid.IsInProgress)
            {
                activateEditMode(grid, curRowIndex, curRowIndex + 1, columnName, curCell - 1);
                clearInterval(intervalObj);
                intervalObj = null;
            }
        }, 5);
    }
    return true;
}

I attached the page & video regarding this scenario. Please kindly have review on the attached file and let me know your response.

Regards,
Hans K.

Sun BennyMember

Hello,

thanks for your help, But I need the support of left and right key, how to write js code yet.

Hello,

Please forgive me for lack of understanding about the reported problem.

I modified the JavaScript code by adding code to handle Left and Right key event.

I add a new function that suitable with Left and Right key event:

function activateEditModeColumn(grid, curCellIndex, nextCellIndex, curRowIndex){
    if (nextCellIndex >= 0 && nextCellIndex < grid.RootTable.Columns.length)
    {
        var curRowEl = grid.RootTable.GetRow(curRowIndex);
        var currCell = curRowEl.GetCell(curCellIndex);
        var nextCell = curRowEl.GetCell(nextCellIndex);
        grid.SetFocus();
        currCell.Select(true);
        curRowEl.Select();
        nextCell.ActivateEdit();
    }
}

I add a couple of line codes in WebGrid1_OnEditKeyDown function:

//if left arrow key
else if (event.keyCode == 37) {
    grid.ExitEdit(1, 0, 0); 

    intervalObj = setInterval(function ()
    {
        if (!grid.IsInProgress)
        {
            activateEditModeColumn(grid, curCell - 1, curCell - 2, curRowIndex);
            clearInterval(intervalObj);
            intervalObj = null;
        }
    }, 5);
}

//if right arrow key
else if (event.keyCode == 39) {
    grid.ExitEdit(1, 0, 0); 

    intervalObj = setInterval(function ()
    {
        if (!grid.IsInProgress)
        {
            activateEditModeColumn(grid, curCell - 1, curCell, curRowIndex);
            clearInterval(intervalObj);
            intervalObj = null;
        }
    }, 5);
}

I attached the modified page as well. Please kindly have review on the page once again.

Thank you.

Regards,
Hans K.

Sun BennyMember
Hello, Thanks for you reply. It's OK. Thanks again.

Hello,

I’m glad to hear that the JavaScript code suitable for your current scenario.

Should you have further question, please do not hesitate to contact us.

Thank you.

Regards,
Hans K.

All times are GMT -5. The time now is 5:25 AM.
Previous Next