Intersoft Community - WebGrid Enterprise - Updating the grid using Enter and Down Arrow Keys

Updating the grid using Enter and Down Arrow Keys

Hans — Thu, 01 Nov 2012 06:31:53 GMT

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.

Updating the grid using Enter and Down Arrow Keys

adajani@najiasystems.com — Wed, 31 Oct 2012 18:12:56 GMT

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!

Updating the grid using Enter and Down Arrow Keys

Hans — Tue, 30 Oct 2012 07:42:00 GMT

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.

Updating the grid using Enter and Down Arrow Keys

adajani@najiasystems.com — Mon, 29 Oct 2012 12:43:38 GMT

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.

Updating the grid using Enter and Down Arrow Keys

Hans — Sun, 28 Oct 2012 22:13:21 GMT

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.

Updating the grid using Enter and Down Arrow Keys

adajani@najiasystems.com — Fri, 26 Oct 2012 14:46:56 GMT

Hello?

Updating the grid using Enter and Down Arrow Keys

adajani@najiasystems.com — Thu, 25 Oct 2012 11:40:35 GMT

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.

Updating the grid using Enter and Down Arrow Keys

Hans — Thu, 25 Oct 2012 03:00:59 GMT

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.

Updating the grid using Enter and Down Arrow Keys

adajani@najiasystems.com — Wed, 24 Oct 2012 10:16:58 GMT

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?

Updating the grid using Enter and Down Arrow Keys

Hans — Wed, 24 Oct 2012 06:11:36 GMT

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.

Updating the grid using Enter and Down Arrow Keys

adajani@najiasystems.com — Sat, 20 Oct 2012 15:26:06 GMT

I'd like to be able to cause the grid to update after I edit a cell by hitting the enter or down arrow key.
Hitting either of those keys should update the grid, move down one cell and place it in Edit Mode ready for editing. Much like Excel.

What happens now is if I hit the down arrow key, the grid updates but does not move focus to the below cell. The enter key behaves differently in IE and Firefox. In IE, the grid updates just fine. However, in Firefox, the whole page refreshes and the change is not applied.

The update works if I tab off or move or move to the left/right cell.

My code is below. I'm binding the grid to an Object Data Source.

<ISWebGrid:WebGrid ID="WebGrid1" runat="server" Width="100%" Height="100%" UseDefaultStyle="true" EnableWebResources="Always"
                           DataSourceID="odsAccountLineList" CustomSchemaRetrieval="UseWebGrid">
            <RootTable GridLineStyle="NotSet" DataKeyField="account_line_id" RowHeaders="Yes">
            </RootTable>
            <LayoutSettings DisplayDetailsOnUnhandledError="true"           
                            InProgressUIBehavior="ChangeCursorToHourGlass" StatusBarVisible="true"
                            NewRowLostFocusAction="AlwaysUpdate"
			    RowLostFocusAction="AlwaysUpdate" 
                            AllowColumnMove="Yes"
			    AllowFilter="No" 
                            AllowGrouping="No" 
                            AllowSelectColumns="Yes" 
                            AllowSorting="No"
			    GroupByBoxVisible="false" 
                            AutoHeight="false" 
                            AutoWidth="false" 
                            PagingMode="None"
                            AllowEdit="Yes" 
                            AllowDelete="Yes"
                            AllowMultipleSelection="Yes"
                            UseRelativePositioning="true"
                            CellClickAction="CellSelect"
                            ApplyChangesKey="Enter">
                <AlternatingRowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="LightGray" Wrap="false" Font-Size="8pt" Font-Names="Arial Monospaced"></AlternatingRowStyle>
                <RowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="White" Font-Size="8pt" Wrap="false" Font-Names="Arial Monospaced"></RowStyle>
                <ClientSideEvents OnRowContextMenu="wb_OnRowContextMenu" OnColumnContextMenu="wb_OnColumnContextMenu"
                    OnEnterEditMode="wb_OnEnterEditMode" OnScroll="wb_OnScroll" OnEditKeyDown="wb_OnEditKeyDown" />
		    </LayoutSettings>
        </ISWebGrid:WebGrid>

Client Side JS. I am not including all the client side events. Nothing out of the ordinary is happening there and they are working just fine:

/**
        * Activates Edit Mode for the specified row and column
        */
        function activateEditMode(grid, rowIndex, columnName) {
            if (rowIndex != 0 && rowIndex < grid.TotalRows) {
                var myRow = grid.RootTable.GetRow(rowIndex);
                myRow.BeginEdit();
                myRow.GetCell(columnName).ActivateEdit();
            }
        }

/**
        * Some manual behavior for navigating the grid
        */
        function wbAARS_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;
            if (keyCode == 38) { // if up arrow
                grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty
                activateEditMode(grid, curRowIndex - 1, columnName);
            }
// Note(XX): I was testing for the enter key here to apply the same logic as the down arrow key
 //            else if (keyCode == 13 || keyCode == 40) {  // if down arrow or enter key
            else if (keyCode == 40) {  // if down arrow or enter key
                grid.ExitEdit(1, 0, 0);  // exit and update the row if dirty
                activateEditMode(grid, curRowIndex + 1, columnName);
            } 
            return true;
        }

As I understand it, when I call ExitEdit, it refreshes the grid and waits for an XML response back. So activateEditMode gets called, but when the response is received, the focus is returned back to the original editted cell.

Your help is appreciataed. Thanks.