grid stops responding in IE7

I need to release this to production next week, so a quick response is much appreciated. The problem I'm seeing occurs mostly in IE7 (though, one person saw it in FireFox), and is intermittant. We didn't discover the problem until we deployed the web application to our Windows 2003 server. I can not get the problem to appear when running on my development machine (XP professional, IE7).

I am using a data grid in a GradeBook application, so teachers enter marks for students/assignments in the grid. When the page first loads, I setup the grid so that the onCellClicked event is captured by a function named onCellFocus:

obj.onCellClicked = onCellFocus;

I also listen for key-down events:

obj.setEvent("onkeydown", function(e) {
defaultKeyEventHandler.call(this, e);
updateCurrentColAndRow();
}
);

I also have the grid setup so that only some of the data load initially. The user can click in the "unloaded" columns to get the data for those columns from the server via an ajax call.

The problem is this:
in IE (we test/support in version 7 and above), after the user has initiated the ajax call to load a column (and sometimes it takes a few clicks before the problem happens), the grid stops "responding" to user clicks in that when the user clicks on a cell, it no longer is editable. The onCellFocus js is getting called - there is some code in there which updates a section of the screen, and that code is certainly being executed.

I'm not sure why the cells are no longer editable when clicked-on. I suspect that my calls to "dataGridObj.setCurrentColumn(currentCol);" and "dataGridObj.setCurrentRow(currentRow);" are no longer "heard" by the grid anymore ??? are those really the calls which make the cell editable?

The response handler for the ajax call (see below) gets a string of javascript which loads student mark information into a js array from which the grid gets its data.

Please help. here are some code snippets:

setting up the grid:

defaultKeyEventHandler = obj.getEvent("onkeydown"); //get event handle

obj.setEvent("onkeydown", function(e) {
defaultKeyEventHandler.call(this, e);
updateCurrentColAndRow();
}
);

. . .

function onCellFocus(event, column, row) {

var stuID = stuIDs[row];
var assignID = getAssignIDForCol(column);

prevSelectedCol = currentCol;
prevSelectedRow = currentRow;
currentCol = column;
currentRow = row;

var selCols = dataGridObj.getSelectedColumns();
var selRows = dataGridObj.getSelectedRows();
selCols[0] = currentCol;
selRows[0] = currentRow;

// these are pg-level js vars
currentStuID = stuID;
currentAssignID = assignID;

dataGridObj.setCurrentColumn(currentCol);
dataGridObj.setCurrentRow(currentRow);

updateUIForCurrent(stuID, assignID);
}

function updateCurrentColAndRow() {

// keep track of this so that the
// highlighting/unhighlighting of selected
// rows works correctly
prevSelectedCol = currentCol;
prevSelectedRow = currentRow;

var selCols = dataGridObj.getSelectedColumns();
if (selCols.length > 0) {
currentCol = selCols[0];
}

var selRows = dataGridObj.getSelectedRows();
if (selRows.length > 0) {
currentRow = selRows[0]
}

dataGridObj.setCurrentColumn(currentCol);
dataGridObj.setCurrentRow(currentRow);

currentStuID = stuIDs[currentRow];
currentAssignID = getAssignIDForCol(currentCol);

updateUIForCurrent(currentStuID, currentAssignID);
}

function updateUIForCurrent(stuID, assignID) {
showMarkDetail(stuID, assignID);
updateAssignDisplay(assignID);

var isComment = isCommentAssign(assignID);
var isLocked = isLockedAssign(assignID);

showCommentMarkTable(isComment);

var stuMarkInfo = getStuMarkInfo(stuID, assignID);
if (stuMarkInfo == null || stuMarkInfo.markToDisplay == cellClickToLoadMsg) {
asyncLoadColumn(assignID);
}

<%if(!ReadOnly){%>
if (!isComment && !isLocked) {
enableEditNote(true);
} else {
enableEditNote(false);
}
<%}%>

}


. . .


function asyncLoadColumn(assignID) {
paintColAsLoading(assignID);
var queryString = "assignID=" + assignID;
var theRequest = newHttpRequest("post","<%= BaseURL %>Modules/GradeBook/StuMrkInfoHandler.aspx",true,addMoreStuMrkInfoData, queryString);

asyncRequests.push(theRequest);
}

// this is the callback function which will
// load more student mark data into the javascript objects
function addMoreStuMrkInfoData() {
var aRequest = null;
var numOfReqs = asyncRequests.length;

for (var n=0; n<numOfReqs; n++) {
aRequest = asyncRequests[n];
if(aRequest != null && aRequest.readyState == 4){
if(aRequest.status == 200) {
var resp = aRequest.responseText;

// the responseText is a string of javascript which
// loads data into the student marks array
eval(resp);

asyncRequests[n] = null;

}
}
}
}

Most likely the problem happens because you refresh/update the cell or the row while it is still in edit mode. In this case the editing state is not properly terminated and the grid thinks it is still in edit mode so it will not allow to edit other cells. I was not able to trace it in your code, so it is just a guess, but I think it is the most probable reason.

thanks, Alex. Is there a way for me, programatically, to end the editing mode before I updated the contents of the cell?

Currently it is only possible if you move the focus to another element, for example, calling focus() on another control.

Alex, that worked! thanks. you made my day :-)

to fix it, I simply updated the code in the ajax response handler to put focus on another widget before update the js array that holds the data for the grid:

// need to put focus on some other element on the pg
// to end any edit events that might be happeninng in the grid
// otherwise, trying to update grid cells will cause the
// grid to stop repsonding in IE
document.getElementById('high').focus();

var resp = aRequest.responseText;

// the responseText is a string of javascript which
// loads data into the student marks array
eval(resp);


asyncRequests[n] = null;