User Profile & Activity

Ahmed Dajani Member
Page
of 6
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!
Posted: October 29, 2012 12:43 PM
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?
Posted: October 25, 2012 11:40 AM

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.

Posted: October 24, 2012 10:16 AM

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?

Bernard,

I am using WebGerid 7 and the follwing for DocType. Please note, changing the doctype is not an option as it throws off the entire display of my application at the moment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I tried recreating the issue in a separate project but have not been 100% successful. The behavior I was able to recreate was that double clicking or hitting the enter key in a cell to open it in edit more will render the edit text box about 10 or so pixels down from the cell I clicked.

Debugging my own project where the intial error occurs I noticed the following. I have a column that is 255 characters long, let's call it "Stub" which is a text column. It can be resized in the grid to any size. For some reason, when I hover the right adjacent column, the tool tip that comes up is of the column to the left and not the one I'm hovering over. That leads me to believe there is an issue in rendering. If I resize "Stub" to a wide enough width, it goes away. But if it's a small size where most of the data is truncated the problem occurs. I have not seen this problem occur in with any other columns.

I understand you are not able to recreate this on your end. However, it is very frustrating for me to run into different issues under different browsers. It is even more frustrating when I cannot recreate it due to some anamloy. I also understand there is a time difference between us. However, I cannot afford to wait another day on this project as my client has grown extremely impatient with us and I am already past deadline.

I need a direct way of communicating with intersoft to fix this problem ASAP please.
Posted: October 23, 2012 10:56 AM
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.
Posted: October 22, 2012 4:21 PM
Thanks Yudi. I think Client Side API documentation is still lacking. There is no clear reference on this site.

I've checked out the article. The real issue is on this thread: http://intersoftpt.com/Community/WebGrid/Updating-the-grid-using-Enter-and-Down-Arrow-Keys/?1350933280442

Thanks for your response.

Posted: October 22, 2012 10:11 AM

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


Posted: October 2, 2012 1:33 PM
Still haven't resolved this error...
All times are GMT -5. The time now is 7:53 PM.
Previous Next