getElementById fails for cells scrolled off screen

If I do the following:

var cell = document.getElementById('MyGrid-cell-0-0');
alert (cell.innerHTML);

I get the HTML I would expect for the first cell of the first row.

If I now do the following:

var cell = document.getElementById('MyGrid-cell-0-10');
alert (cell.innerHTML);

where the row index is now scrolled off screen (ie row 10), I get a javascript error telling me 'object required'.

ie, cell is null because the element with the id 'MyGrid-cell-0-10' could not be found. Yet, when I look at the DOM in full, the id is clearly there.

This happens when I am refreshing the grid. Its possible I may just need to get the grid to bring that element on screen first.

Any ideas?

This behavior is by design - the grid does not paint all rows in virtual mode in order to improve rendering speed. The new set of rows is repainted when you scroll up/down. You can change this behavior with setVirtualMode(false) but it only works for very small datasets (100-200 rows).

Why do you need access to the page html?

I was upgrading our V1 code to V2 and had the following line that was used to focus the grid on a remembered row. It worked perfectly in V1:

var fc = document.getElementById(MyGrid.getRowTemplate(rememberedGridRow)getItemTemplate(0).getId()).focus();

Yesterday I tried another route as per another post:

MyGrid.setSelectedRows([rownum]);
MyGrid.setCurrentRow(rownum);
MyGrid.setScrollTop(-1);

This doesnt work at the moment as I have v2.0.1. Im now in the process of upgrading to v2.0.2 to solve the hidden first row problem. In the end I hope this will provide the solution Im looking for.

I have just installed v2.0.2 and attempted the above code with some modifications:

MyGrid.setSelectedRows([rownum]);
MyGrid.setCurrentRow(rownum);
MyGrid.setScrollTop(rownum);

The grid now doesnt scroll to the highlighted row, it just sits on the original first grid view. It was working before with the 2.0.1 code but with the 'selected row hidden in the header' bug.

Ive also tried just the following but also no joy:

MyGrid.setSelectedRows([rownum]);
MyGrid.setCurrentRow(rownum);

Have I made a mistake or is there some other way of getting the selected row to scroll into view?

OK, I think Ive fixed it. It seems to be delays in the rendering time causing the problem. A call to setTimeOut is needed to give it some time:

MyGrid.setSelectedRows([rownum]);
window.setTimeout(function(){ MyGrid.setCurrentRow(rownum);}, 100 );

Note that the value for rownum inside the function used by setTimeout should be derived again to avoid scoping problems. I used rownum here to simplify the example.