max row limit in grid in IE

I've implemented server-side paging for the grid, to support a large number of rows. It works well, but I am hitting some limit in IE8. In the following example, I set the row count to 100k but I can only see about 75k rows in IE (more or less depending on the font size I use in the grid). In Firefox, Safari, and IE9 I see all 100k rows. I'm using AW 2.5.5. Any ideas?

<html>

<head>

<script src="aw.js"></script>

<link href="aw.css" rel="stylesheet" type="text/css" />

<script>

var tbl = new AW.UI.Grid;

tbl.setColumnCount(1);

tbl.setRowCount(100000);

tbl.setCellText(function(c,r){return getCellText(tbl, r, c)});

document.write(tbl);



function getCellText (tbl, row, col) {

    return 'row:' + row;

}



</script>

</head>

<body>

</body>

</html>

After some digging, I found that this problem occurs because IE8 limits style.height to 1342177 pixels. So in my example the height of aw-bars-spacer should be 1800000px (18px per row * 100000 rows) but IE8 limits it to 1342177 so I can only scroll to row 74,565 (1342177/18).

Googling "IE8 1342177 pixels" shows other examples of this problem.

Alex, any ideas for a workaround? Maybe applying a mutliplier to the vertical scroll position to adjust for this limit? This problem is affecting our customers who have upgraded from IE6 or IE7 to IE8.

The problem is with setting scrollTop property. Unfortunately it requires a numeric value (in pixels) and does not accept units like in or em. Maybe it will be possible to replace scrolling with margin or absolute/relative position. Sorry, don't have working solution yet.

Actually, your suggestion about a multiplier makes much more sense than changing the scrolling method. I'll try to make something with it...

I need to solve this quickly so I tried to fix it myself. In AW.Grid.Controllers.Virtual I added a getMult() function and added or changed the lines containing "mult" below. This mostly works but I still can't scroll quite all the way to the last row (it stops 6 rows short) probably because of rounding. Alex, can you think of a better fix?

AW.Grid.Controllers.Virtual ...



function getMult() {

    if (!AW.ie8) 

        return 1;

    var scrollHeight = this.getScrollHeight();

    var bs = this.getScroll().getContent("box/spacer").element();

    if (bs && bs.clientHeight && bs.clientHeight < scrollHeight)

        return scrollHeight / bs.clientHeight;

    return 1;

}



function calcVirtual(dir){

  ...

    var scrollTop = this.getScrollTop();

    var mult = getMult.call(this);

    scrollTop = Math.round(scrollTop * mult);

    var scrollLeft = this.getScrollLeft();

  ...

    var rvScroll = start * rowHeight;

    rvScroll = Math.round(rvScroll / mult); 

  ...

}



onCurrentRowChanged: function(i){

    var current=this.getCurrentRow();

    var scroll=this.getScrollProperty("top");

    var mult = getMult.call(this);

    scroll = Math.round(scroll * mult);

  ...

    if(top < scroll){

        this.setScrollTop(Math.floor(top/mult));

    }

    if(max+scroll < bottom){

        this.setScrollTop(Math.ceil((bottom - max)/mult));

    }

  ...

}

I tweaked the getMult() function as follows, and the results are better but I still can't scroll to row 100,000. Now it stops 1 row short instead of 6.

function getMult() {

    if (!AW.ie8)

        return 1;

    var scrollHeight = this.getScrollHeight();

    var bs = this.getScroll().getContent("box/spacer").element();

    if (bs && bs.clientHeight && bs.clientHeight < scrollHeight) {

        var visHeight = this.getContentHeight("center");

        return (scrollHeight-visHeight)/(bs.clientHeight-visHeight);

    }

    return 1;

}

Any thoughts on this Alex?

My changes (above) improve things but I still can't scroll to see all 100k rows, maybe because of loss of precision in scrollTop value.

I think you should use box height (includes scrollbar) instead of client height -

function getMult() {

    if (!AW.ie8)

        return 1;

    var scrollHeight = this.getScrollHeight();

    var bs = this.getScroll().getContent("box/spacer").element();

    if (bs && bs.clientHeight && bs.clientHeight < scrollHeight) {

        var boxHeight = bs.parentNode.offsetHeight;

        return (scrollHeight-boxHeight)/(bs.clientHeight-boxHeight);

    }

    return 1;

}

At least this way it goes exactly to the end of last row.

Forum search