Hide/Show grid with vitual scrolliing shows blank list

Hi,

I have a grid displaying a vitual scrolled list.

The list is embedded within a tab and so can be hidden/shown.

Problem is that if the list is displayed with virtual scrolling, and has been scrolled down, then hiding then re-showing the list results in the list being displayed as blank. Problem appears to be due to the scroll bar being automatically repositioned at the top of the list. Presumbaly, the scroll bar position and virtual-scrolling info are now out of sync in some way???

What would be the solution - remember the scroll bar position on hide and
manually set it back on show? Or is there something Ive missed?

Steve M

April 28,

Heres some simple code that shows my problem (and I may have a solution - see below)

<html>
<head>
<title>Problem</title>
<style>body {font: 12px Tahoma}</style>


<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/system/aw.css" rel="stylesheet"></link>

</head>
<body>

<span id="myGrid"></span>

<p>Back to <a href="index.htm">row examples</a>, <a href="../index.htm">all examples</a></p>


<script>

var myData = [
[1, "World", 1018057389, 2005, "world"],
[2, "European Union", 247000000, 2006, "eu"],
[3, "United States", 205326680, 2005, "us"],
[4, "China", 123000000, 2006, "cn"],
[5, "Japan", 86300000, 2005, "jp"],
[6, "India", 60000000, 2005, "in"],
[7, "Germany", 50616000, 2006, "de"],
[8, "United Kingdom", 37600000, 2005, "gb"],
[9, "Korea South", 33900000, 2005, "kr"],
[10, "France", 29945000, 2006, "fr"] // no comma in the last line
];

var myHeaders = ["Rank", "Country", "Internet users", "Data from"];

// row index
var serial = 1000;

var num = new AW.Formats.Number;
num.setTextFormat("#,###.");

var grid = new AW.UI.Grid;
grid.setId("myGrid");
grid.setRowHeight(30); // set row height to 30px
grid.setHeaderText(myHeaders);
grid.setCellData(myData);
grid.setCellFormat(num, 2);
grid.setColumnCount(4);
grid.setRowCount(10);
grid.refresh();

function show(){
grid.setStyle("display", "block");

}

function hide(){
grid.setStyle("display", "none");
}

</script>
<br>
<button onclick="show()">show</button>
<button onclick="hide()">hide</button>
</body>
</html>

Adding grid.refresh() after setting the style seemed to get rid of the problem.

Steve M

April 28,

See also this one for a similar case -

http://www.activewidgets.com/javascript.forum.22124.8/grid-losing-focus-in-firefox.html

When you set the style to display:none - the scroll position is lost because all sizes are reset to zero. You can restore the grid scroll with this code (which is less heavy than full refresh) -

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

Alternatively you can hide/show tabs with visibility:hidden + position:absolute which does not affect the content rendering.

Alex (ActiveWidgets)

April 28,

This topic is archived.

Hide/Show grid with vitual scrolliing shows blank list

See also:

Search

New Data Grid

Version 2