Hello,

Thank you for your code.

I create a simple WebGrid sample, based on your code in your post.

I bind WebGrid to access data source (Northwind.mdb database and Shippers table).

And I can replicate your issue on my end as well.

To resolve I modify your javascript code.

In wbAARS_OnEditKeyDown function, I add this code:

var curCell = grid.GetActiveEditCell().cellIndex;

And I modify from:

activateEditMode(grid, curRowIndex - 1, columnName);

To:

activateEditMode(grid, curRowIndex, curRowIndex - 1, columnName, curCell - 1);

And I change your activateEditMode function to:

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

If the issue still persists, could you modify my sample so that I replicate your issue on my sample?

So I can help you to investigate the issue further more.

Thank you.

Regards,

Hans.

Hans,

Thanks for the answer. It's almost there...

The up and down arrow and enter keys work just fine with Firefox. They almost work in IE.

I am having a weird scroll issue as presented in the attached screen shots. The grid scroll bar (I have 80+ columns) shifts back over to the left. I already have code that will preserve the horizontal scroll position of the grid (got the solution from asking the forum), and that works just fine in Firefox and usually in IE except in this case. It works fine in both browsers if I "mouse-off" the cell. The other issue in IE is the control-focus becomes on the grid control and not on a cell. So clicking the right or left arrow after this will scoll the page left or right, rather than the cell cursor.

My latest implementation is as follows:

function wbAARS_OnEditKeyDown(controlId, keyCode) {
            var returnVal = true;
            // 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
                activateEditMode(grid, curRowIndex, curRowIndex - 1, columnName, curCell - 1);
            }
            else if (keyCode == 40) {  // if down arrow 
                grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty
                activateEditMode(grid, curRowIndex, curRowIndex + 1, columnName, curCell - 1);
            }
            else if (keyCode == 13) { // enter key
                event.returnValue = false;
                grid.ExitEdit(1, 0, 0);
                window.setTimeout(function () { activateEditMode(grid, curRowIndex, curRowIndex + 1, columnName, curCell - 1); }, 500);
                // return false;
                returnVal = false;
            }
            //            return true;
            return returnVal;
        }

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

            }
        }

Below is how I apply my scrolling preservation:

ram name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub wb_InitializePostBack(ByVal sender As Object, ByVal e As ISNet.WebUI.WebGrid.PostbackEventArgs) Handles wb.InitializePostBack
        ' only perform the below function
        ' when the last action performed by the
        ' grid OTFPB is 'Refresh'
        If e.Action.Equals("Refresh") Then
            ' prepare the parameter to be 
            ' passed over to the client side
            ' in order to set back the previous
            ' vertical and horizontal scroll position
            'FunctionParameter(parm = New FunctionParameter(2))
            Dim parm(2) As ISNet.WebUI.FunctionParameter
            parm(0).Type = "gridId"
            parm(1).Type = "y"
            parm(2).Type = "x"
            ' obtain the value passed from the client
            ' side using AddInput method
            parm(0).Value = Me.wb.ID
            parm(1).Value = Request.Form("scrollTopPos")
            parm(2).Value = Request.Form("scrollLeftPos")
            ' invoke the js function 
            ' in order to set the vertical scroll position
            Me.wb.ClientAction.InvokeScript("ApplyLatestScroll", parm)
        End If
    End Sub

''' <summary>
    ''' Initializes the web grid layout
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub wb_InitializeLayout(ByVal sender As Object, ByVal e As ISNet.WebUI.WebGrid.LayoutEventArgs) Handles wb.InitializeLayout
            ' saving scroll position
            e.Layout.ClientSideEvents.OnBeforeRequest = "SaveScrollPosition"
    End Sub

/**                                                                            `
        * Applies the latest scroll position to the grid
        */
        function ApplyLatestScroll(gridId, y, x) {
            // set back the previous scrollTop and scrollLeft property or
            // vertical and horizontal scroll position with 
            // the parameter sent from the server side
            var grid = ISGetObject(gridId);
            // manually configure the vertical and horizontal scroll position
            grid.RootTable.GetElement(WG40.BODY, WG40.HTMLDIV).scrollTop = y;
            grid.RootTable.GetElement(WG40.BODY, WG40.HTMLDIV).scrollLeft = x;
            return true;
        }

/**
        * saves the last scroll position of the grid
        */
        function SaveScrollPosition(gridId, action) {
            // collecting the last position
            // of the vertical scrollbar
            // by obtaining the scrollTop property
            var grid = ISGetObject(gridId);
            // obtain the scrollTop and scrollLeft property 
            // of the vertical scrollbar and horizontal scrollbar
            var vl = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLDIV).scrollTop + "";
            var hl = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLDIV).scrollLeft + "";
            // only send the scrollTop property
            // of the server if the action performed
            // by the grid OTFPB is 'Refresh'
            if (action == "Refresh") {
                // sending over the scrollTop and scrollLeft property
                // to the server by using AddInput method
                grid.AddInput("scrollTopPos", vl);
                grid.AddInput("scrollLeftPos", hl);
            }
            return true;
        }

Hello,

Thank you for your reply and code and please forgive me for lack of understanding about the reported problem.

I modify my sample using your code.

I add a couple of dummy column to the WebGrid.

I try to run the sample on IE and Firefox, but unfortunately, I can’t reproduce your issue on my end.

I attached video about the result of my sample.

Please kindly have a review on my video and my sample.

And please let me know if there are configurations or steps that I missed while reproducing your issue.

Or perhaps you could modify my sample so that can replicate your issue.

Thank you.

Regards,

Hans.

Hans,

The video you send demonstrates the problem pricesly. Notice how you scroll all the way right in your grid. After you cause the first update you will notice that scroll position changes. It should not. It should remain the same. If you test that in Firefox, the scroll position will return exactly where it needs to go.

If you have a grid with 80+ columns, and you scroll to the 40th column,  and you make a change there , then you update, and the scroll position gets thrown off, that's not optimal at all.

Hello,

Thank you for your reply.

After I investigate this issue further more.

I remove a couple line of code.

In WebGrid1_InitializePostBack, I remove:

If (e.Action.Equals("Refresh"))

And in SaveScrollPosition function, I remove:

if (action == "Refresh")

Please have a review on my sample and let me know the result.

Thank you.

Regards,

Hans.

This works fine, but I still have the problem of losing focus on the cell. The focus goes back on the browser window and not the cell. So then if I click left or right, I am no longer navigating in the grid.

If you can't recreate the issue, can you tell me why in IE the body element takes focus instead of it going back to the grid? 

I am trying to get on the Live Chat for techinical assistance and it won't let me due to some user name and password. Can you please provide so I may solve this problem?

Hello,

 

Thank you for your patience.

I have modified your wbAARS_OnEditKeyDown function and activateEditMode function.

Please let me know the result on your end.

Regards,

Hans.

This works. I found out the issue with focus. I was causing a differnet Refresh on the OnUpdating event.

But this isn't the full solution. I marked the answer too soon.

Now in Firefox, the edit makes it through and I'm set in the edit mode for the cell directly under. That's good. However, if I hit 'esc' key, it takes me to the first cell in that row. Why does that happen and how can I stop that from happening?

In IE 9, it goes directly to the first cell in the next row.

Hello?

Hello,

 

I’m sorry for the late response.

Please try to too add this code below in WebGrid1_OnEditKeyDown client side event:

var curRowEl = grid.RootTable.GetRow(curRow);
var cell = curRowEl.GetCell(curCell - 1);
if (event.keyCode == 27) {
    cell.Select(true);
}

Hope this helps.

Regards,

Hans.

Hans,

Thanks for the answer, but I am still having issues...I can't believe this really..

If you change your code's doctype to: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> you will notice issues with the behavior. Switching to HTML 4.0 doctype is not an option for me. It must be the other.
 
Specifically the problem I am having now is in IE. If I edit a cell and move off it either by arrows or enter key, the cursor does not select the appropriate cell. If I hit the down arrow key, I should go to the below cell and so forth. Right now, the focus is lost. If you hit the side arrows you will notice the first cell in the next row is selected.

Hello,

Thank you for your reply.

After I change the doctype, I can replicate your issue on my end as well.

To resolve this issue please try to modify the code in keyDown javascript function.

From:

nextRowEl.Select();

To:

nextRowEl.Select(true);

This workaround works on my end.

Regards,

Hans.

Great, this seems to work. Now I have a new issue with the actual update event.

I am not doing any batch updates. So if I move off the row, the grid updates the data. Currently, when I get the data to bind to data source, I do some totaling in the background. So Let's say the first 5 rows are details and the 6th row is the total line. If I update a value in row 3, column 2, then I should see the total reflected immediately in row 6 column 2. However, this isn't happening. When I move off the row I am updating, the grid does indeed and update and the value gets written to the database, but the total doesn't come up. It seems the grid only updates the row I changed. As a workaround, I added the following call in my ObjectDataSource OnUpdating event:

WebGrid1.ClientAction.Refresh()

This works great. Unfortunately, when this code is implemented, if I hit down/up arrow or enter key as we've been discussing above, the focus is no longer on the cell in IE. The focus become on the body element. So clicking right/left arrows moves my whole page and not the grid.

So I'm stuck, again...

My setup is grid bound to object data source, plus all the code above. My ObjectDataSource on Updating call either has ClientSide.Refresh() call which puts the focus on the wrong element in IE only, or I take it out and my grid doesn't show the right totals.

Anything we can do here in this event or in the activateEditMode call? Basically, If I update a cell, I need to update the whole column or the whole grid.

/**        * Some manual behavior for navigating the grid
        */
        function wb_OnEditKeyDown(controlId, keyCode) {
            var returnVal = true;
            // get the grid
            var grid = ISGetObject(controlId);
            // get current information about row and cell
            var activeEditCell = grid.GetActiveEditCell();
            var curRow = activeEditCell.rowElement;
            var curRowIndex = curRow.rowIndex;
            var curCell = grid.GetActiveEditCell().cellIndex;
            var curRowEl = grid.RootTable.GetRow(curRowIndex);
            var cell = curRowEl.GetCell(curCell - 1);
            if (keyCode == 38) { // if up arrow
                grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty
                activateEditMode(grid, curRowIndex, curRowIndex - 1, curCell - 1);
            }
            else if (keyCode == 40 || keyCode == 13) {  // if down arrow or enter key
                keyCode = 40;
                event.keyCode = 40;
                //returnVal = true;
                event.returnValue = false;
                grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty
                activateEditMode(grid, curRowIndex, curRowIndex + 1, curCell - 1);
            }
            else if (keyCode == 27) {   // esc key
                cell.Select(true);
            }
            return returnVal;
        }

Thanks!

Hello,

 

Thank you for your information.

If you wish to have a row to see the total from one of Webgrid’s column, you could use AggregateFunction property.

I bind Webgrid to Products table and I set ColumnFooters property to Yes.

In UnitsInStock column, I set AggregateFunction property to Sum.

The total value will be updated if I update the value in UnitsInStock column.

Please have review on my sample to the result.

However, if this solution doesn’t meet the requirement of your scenario, could you please provide a simple runnable project? So I can help you to find the solution.

Thank you.

Regards,

Hans.