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

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

Hans — Sun, 20 Jul 2014 22:18:19 GMT

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.

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

BennySun — Thu, 17 Jul 2014 22:13:49 GMT

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

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

Hans — Thu, 17 Jul 2014 00:20:42 GMT

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.

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

BennySun — Wed, 16 Jul 2014 02:33:36 GMT

Hello,

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

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

Hans — Wed, 16 Jul 2014 00:58:43 GMT

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.

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

BennySun — Tue, 15 Jul 2014 00:52:49 GMT

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();
        }