2 Grids Set with % Width: IE Issue

Having an issue when displaying two grids on a single page each with their widths set to a percentage. Our application originally was coded to have these two grids at a fixed size. The customer has now requested they size with the browser window. The issue in IE is when the page is resized, the contents of the last rendered grid are the only ones repainted. The contents of the top grid act as if the grid size has not changed.

To run a simple test, I found a simple two grid example (code below)provided by Alex from the following post:

http://www.activewidgets.com/javascript.forum.10849.4/help-have-2-grids-need.html

Environment: IE 6.0, AW 2.0.2

When I run this code, I see that the horizontal scroll bar acts in one of two ways:
1) If the horizontal scrollbar is needed when the grid first draws, it will never be removed even if all columns are displayed
2) If the horizontal scrollbar is not needed when the grid first draws, it will never be displayed.

This problem is compounded more when I add the DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This DOCTYPE is required for our development. With this DOCTYPE, the full issue kicks in. When I run this code and I resize the window, the contents of the top grid do not repaint the same way the bottom grid does.

Example code from mentioned post:

<html> 
<head> 
    <title>ActiveWidgets Grid :: Examples</title> 
    <style> body, html {font: menu; background: threedface;} </style> 

    <!-- ActiveWidgets stylesheet and scripts --> 
    <link href="../../runtime/styles/classic/aw.css" rel="stylesheet" type="text/css" ></link> 
    <script src="../../runtime/lib/aw.js"></script> 

    <!-- grid format --> 
    <style> 
        #grid1 {height: 200px; width: 100%; border: 2px inset; background: white} 
        #grid2 {height: 100px; width: 100%; border: 2px inset; background: white} 

        #grid1 .aw-column-1 {width: 200px; background-color: threedlightshadow;} 
        #grid2 .aw-column-1 {width: 150px; background-color: infobackground;} 

        .aw-column-2 {text-align: right;} 
        .aw-column-3 {text-align: right;} 
        .aw-column-4 {text-align: right;} 

        .aw-grid-row {border-bottom: 1px solid threedlightshadow;} 
        .aw-grid-cell {border-right: 1px solid threedlightshadow;} 

    </style> 

    <!-- grid data --> 
    <script> 
        var data1 = [ 
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"], 
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"], 
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"], 
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"], 
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"], 
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"], 
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"], 
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"], 
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"], 
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"], 
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"], 
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"], 
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"], 
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"], 
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"], 
        ]; 

        var data2 = [ 
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"], 
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"], 
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"], 
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"], 
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"], 
        ]; 

        var columns1 = [ 
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees" 
        ]; 

        var columns2 = [ 
            "Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)" 
        ]; 
    </script> 
</head> 
<body> 
    <p> 
        Here is the first grid: 
    </p> 

    <script> 
        var obj1 = new AW.UI.Grid; 
        obj1.setId("grid1"); 
        obj1.setRowCount(15); 
        obj1.setColumnCount(5); 
        obj1.setCellText(function(c, r){return data1[r][c]}); 
        obj1.setHeaderText(function(c){return columns1[c]}); 
        document.write(obj1); 
    </script> 

    <p> 
        And another one... 
    </p> 

    <script> 
        var obj2 = new AW.UI.Grid; 
        obj2.setId("grid2"); 
        obj2.setRowCount(5); 
        obj2.setColumnCount(5); 
        obj2.setCellText(function(c, r){return data2[r][c]}); 
        obj2.setHeaderText(function(c){return columns2[c]}); 
        document.write(obj2); 
    </script> 
</body> 
</html>

C. Bustamante

April 4,

I tested your code with AW 2.5.1 (since I don't have 2.0.2 installed), and against IE, Netscape and FF.

The same issue happens with IE exactly as you described but with Netscape and FF, both the grids act like the top grid in IE. Neither grid will display a horizontal scrollbar if the page is reduced in width. If I do a refresh while the page is smaller, the scrollbars appear but both do not disappear when the page is expanded to its full width.

I also tried with a smaller percentage width and also changed the height to a percentage. No change in behaviour was observed. The same occurs with just one grid in FF and Netscape. IE seems to handle it OK. So its definitely a bug of some sort.

Anthony

April 6,

This is a bug in AW 2.0.2 (and 2.5.1).

Here is a patch for 2.0.2 -

new AW.Scroll.Bars;
var scroll = AW.Scroll.Bars.prototype;

scroll.setEvent("onresize", function(){

    this._serial = ((this._serial||0) + 1) % 1000;
    var s = this._serial;

    this.setTimeout(function(){
        if (s == this._serial) {
            this.raiseEvent("adjustScrollBars");
        }
    });
});

And also the similar patch for 2.5.1 -

new AW.Scroll.Bars;
var scroll = AW.Scroll.Bars.prototype;

scroll.setEvent("onresize", function(){

    if (!this._initialized){
        return;
    }

    this._serial = ((this._serial||0) + 1) % 1000;
    var s = this._serial;

    this.setTimeout(function(){
        if (s == this._serial) {
            if (this.element()) {

                var w = this.element().offsetWidth;
                if (w != this.getContentProperty("width", "total")) {
                    this.setContentProperty("width", w, "total");
                }

                var h = this.element().offsetHeight;
                if (h != this.getContentProperty("height", "total")) {
                    this.setContentProperty("height", h, "total");
                }
            }
        }
    });
});

Alex (ActiveWidgets)

April 7,

This topic is archived.

2 Grids Set with % Width: IE Issue

See also:

Search

New Data Grid

Version 2