Grid losing focus in FireFox

I am showing a grid in a div used in a multi-tab kind of display. If we scroll down the grid then changing the tab (which make the grid not visible) and coming back the grid has lost its focus and is displaying row 1 or gird is empty and I need to click on it to make something displayed. Works perfectly in IE but not in FireFox. AW version 2.0.1

Can anybody help ?

Serge Bouchard

March 4,

Can you try it with AW 2.5.1?

Anthony

March 5,

Just did it... same results

Serge Bouchard

March 5,

Can you post a snapshot of your code? We need reprocude it.

Tkz.

Paulo Cesar (PC from Brazil)

March 5,

Just try the following code in IE and FF. Scroll down to the middle of the grid, click on block02 and come back to block01. In IE it will come back at the previous scrolling position and in FF it will at best come back to the beginning of the grid but most of the time the grid is empty and you need to move the slider a little to get the first rows.

thanks

<html>
<head>
<script src="aw/lib/aw.js"></script>
<link href="aw/styles/xp/aw.css" rel="stylesheet"></link>

<style>
.#myGrid .aw-column-0 {width: 150px;"});
.#myGrid .aw-column-1 {width: 150px;"});
.#myGrid .aw-column-2 {width: 150px;"});
.#myGrid .aw-column-3 {width: 150px;"});

</style>
<script>

function init() {
var myData = new Array(100);

for (var i=0;i<100;i++) {
var row = new Array(4);
row[0] = "Fld1-" + (i+1);
row[1] = "Fld2-" + (i+1);
row[2] = "Fld3-" + (i+1);
row[3] = "Fld4-" + (i+1);
myData[i] = row;
}
var myHeaders = ["Fld1", "Fld2", "Fld3", "Fld4"];

var obj = new AW.Grid.Extended;

obj.setId("myGrid");

obj.setCellText(myData);

obj.setHeaderText(myHeaders);
obj.setColumnCount(4);
obj.setRowCount(100);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
var div = document.getElementById("grid01");
div.innerHTML = obj;
}

function block01() {

document.getElementById("block02").style.display = "none";
document.getElementById("block01").style.display = "block";
}
function block02() {

document.getElementById("block01").style.display = "none";
document.getElementById("block02").style.display = "block";
}
</script>
</head>
<body onload="init();">
<div style="display: block" id="block01">
<div id="grid01"></div>
</div>
<div style="display:none" id="block02">
<h1>Here is block 02</h1>
</div>
<input type="button" value="Block01" onclick="block01();">
<input type="button" value="Block02" onclick="block02();">
</body>
</html>

Serge Bouchard

March 5,

It seems that Firefox clears scroll position when the element goes inside display:none area and does not restore it when the element becomes visible again. You can fix it forcing the grid to apply it current scroll offsets -

function block01() {

document.getElementById("block02").style.display = "none";
document.getElementById("block01").style.display = "block";

grid.setScrollTop(grid.getScrollTop());
grid.setScrollLeft(grid.getScrollLeft());
}

Alex (ActiveWidgets)

March 5,

Actually, that doesn't quite work. I changed the code Serge had to use a z-index (stacking order) rather than a display style. This shows what's actually happening a little better.

And what happens is that the grid positions are lost as soon as the "block01" DIV is moved away from. Moving back to it simply get the existing top and left scroll positions. Which means it doesn't actually change.

To fix this, make obj a global var and add two more global variables. Vis -

<script>
var obj
var oldleft, oldtop

function init()
....

Then change the two block functions to -

function block01()
{
    document.getElementById("block02").style.display = "none"
    document.getElementById("block01").style.display = "block"
    obj.setScrollLeft(oldleft)
    obj.setScrollTop(oldtop)
}

function block02()
{
    oldtop = obj.getScrollTop()
    oldleft = obj.getScrollLeft()
    document.getElementById("block01").style.display = "none"
    document.getElementById("block02").style.display = "block"
}

Anthony

March 5,

Thanks everyone.

Serge Bouchard

March 6,

I just discovered that the same thing happens when the following float style is removed from a grid -

obj.setStyle("float", "left")

I suspect its related (even though float positioning and visibility aren't) but I haven't tested to confirm.

Anthony

April 12,

This topic is archived.

Grid losing focus in FireFox

See also:

Search

New Data Grid

Version 2