Grid size problem

Hi,

I'm still having this grid size problem.
Let's say I have 10rows (20px each) and 10cols (50px each).
If I fix Grid size as WxH=500x200, the grid will show both scrollbars.
If I artificially increase both dimensions by (let's say) 8px, than no scrollbars appear BUT bot footer row and leftmost fixed column appear as "detached" from the rest of the cell, causing a nasty visual effect (example: left border of last column and header's column separator not aligned).

Here I post the example code, showing two grids, the first with exact size, the last with artficially increased (by 8px) sizes:

<html>
<head>
<title>Test Grid</title>
<link href="runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>

<body>
    <script src="runtime/lib/aw.js"></script> 
    

    
 

    
<style>

    #myGrid { width: 1000px}
    #myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc; font-size:10px; font-family: "Verdana";}
    #myGrid .aw-grid-row a{font-size:10px; color: blue; font-family: "Verdana"; text-decoration:underline;}
    #myGrid .aw-grid-row a: visited{font-size:10px; color: blue; font-family: "Verdana"; text-decoration:underline;}
    #myGrid .aw-alternate-even {background: #fff;}
    #myGrid .aw-alternate-odd {background: #eee;}
    #myGrid .aw-mouseover-row {background: #ccc;} 
    #myGrid .aw-mousedown-row {background: #999;} 
    #myGrid .aw-rows-selected {background: #316ac5; font-weight: bold;}
    #myGrid .aw-column-0 {width: 100px; border-right: 1px solid #ccc; background: #ebeadb; text-align:center; color: blue; font-weight: bold;}
    #myGrid .aw-column-1 {width: 100px;  text-align:center;}
    #myGrid .aw-column-2 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid .aw-column-3 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid .aw-column-4 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid .aw-column-5 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid .aw-column-6 {margin-left: 0px; margin-right: 0px; width: 100px; border-left: 1px solid #ccc; background: #ebeadb; text-align:center; color: blue; font-weight: bold;}
    #myGrid .aw-grid-row .aw-cells-selected {background: #316ac5;}
    #myGrid .aw-grid-headers {color: blue;font-weight: bold;}
    #myGrid .aw-grid-footers {color: blue;font-weight: bold;}
    #myGrid .aw-footer-0 {background: #ebeadb; border-top:2px solid #cbc7b8;}
</style>
<script>
var myData = [
["ROW1", "<a href=\"#\">1_1</a>", "1_2", "1_3", "1_4", "1_5", "TOT1"],
["ROW2", "2_1", "2_2", "2_3", "2_4", "2_5", "TOT2"],
["ROW3", "3_1", "3_2", "3_3", "3_4", "3_5", "TOT3"],
["ROW4", "4_1", "4_2", "4_3", "4_4", "4_5", "TOT4"]
]



var myHeaders = [
["Header", "COL1", "COL2", "COL3", "COL4", "COL5", "Footer"]
]



var myFooters = [
["Footers", "F_1", "F_2", "F_3", "F_4", "F_5", "F_TOT"]
]



var obj = new AW.Grid.Extended;obj.setId("myGrid");obj.setFixedLeft(1);
obj.setFixedRight(1);
obj.setControlSize(700, 120);
obj.setVirtualMode(false);
obj.setCellText(myData);
obj.setHeaderCount(1);
obj.setHeaderText(myHeaders);
obj.setHeaderHeight(20);
obj.setFooterHeight(20);
obj.setFooterVisible(true);
obj.setFooterText(myFooters);
obj.setFooterCount(1);
obj.setColumnCount(7);
obj.setRowCount(4);
obj.setSelectionMode("single-row");
document.write(obj);
</script>
<br><br>nRows=6, W=700, H=120<br><br>


<style>

    #myGrid1 { width: 1000px}
    #myGrid1 .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc; font-size:10px; font-family: "Verdana";}
    #myGrid1 .aw-grid-row a{font-size:10px; color: blue; font-family: "Verdana"; text-decoration:underline;}
    #myGrid1 .aw-grid-row a: visited{font-size:10px; color: blue; font-family: "Verdana"; text-decoration:underline;}
    #myGrid1 .aw-alternate-even {background: #fff;}
    #myGrid1 .aw-alternate-odd {background: #eee;}
    #myGrid1 .aw-mouseover-row {background: #ccc;} 
    #myGrid1 .aw-mousedown-row {background: #999;} 
    #myGrid1 .aw-rows-selected {background: #316ac5; font-weight: bold;}
    #myGrid1 .aw-column-0 {width: 100px; border-right: 1px solid #ccc; background: #ebeadb; text-align:center; color: blue; font-weight: bold;}
    #myGrid1 .aw-column-1 {width: 100px;  text-align:center;}
    #myGrid1 .aw-column-2 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid1 .aw-column-3 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid1 .aw-column-4 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid1 .aw-column-5 {width: 100px;  text-align:center; border-left: 1px solid #ccc}
    #myGrid1 .aw-column-6 {margin-left: 0px; margin-right: 0px; width: 100px; border-left: 1px solid #ccc; background: #ebeadb; text-align:center; color: blue; font-weight: bold;}
    #myGrid1 .aw-grid-row .aw-cells-selected {background: #316ac5;}
    #myGrid1 .aw-grid-headers {color: blue;font-weight: bold;}
    #myGrid1 .aw-grid-footers {color: blue;font-weight: bold;}
    #myGrid1 .aw-footer-0 {background: #ebeadb; border-top:2px solid #cbc7b8;}
</style>
<script>
var myData = [
["ROW1", "<a href=\"#\">1_1</a>", "1_2", "1_3", "1_4", "1_5", "TOT1"],
["ROW2", "2_1", "2_2", "2_3", "2_4", "2_5", "TOT2"],
["ROW3", "3_1", "3_2", "3_3", "3_4", "3_5", "TOT3"],
["ROW4", "4_1", "4_2", "4_3", "4_4", "4_5", "TOT4"]
]



var myHeaders = [
["Header", "COL1", "COL2", "COL3", "COL4", "COL5", "Footer"]
]



var myFooters = [
["Footers", "F_1", "F_2", "F_3", "F_4", "F_5", "F_TOT"]
]



var obj = new AW.Grid.Extended;obj.setId("myGrid1");obj.setFixedLeft(1);
obj.setFixedRight(1);
obj.setControlSize(708, 128);
obj.setVirtualMode(false);
obj.setCellText(myData);
obj.setHeaderCount(1);
obj.setHeaderText(myHeaders);
obj.setHeaderHeight(20);
obj.setFooterHeight(20);
obj.setFooterVisible(true);
obj.setFooterText(myFooters);
obj.setFooterCount(1);
obj.setColumnCount(7);
obj.setRowCount(4);
obj.setSelectionMode("single-row");
document.write(obj);
</script>
<br><br>nRows=6, W=708, H=128<br><br>

</body>
</html>

Thanks in advance to anybody having the patience to have a look ... ;-)
Diabolik

Diabolik

January 25,

I don't see anything 'wrong' with your grid. What is happenning is that you are expecting something from the footer that you are not getting. The footer aligns to the bottom of the grid, not the bottom of your rows. You can see this by simply setting the grid height to 150. I don't see any issue with the columns, they seem to be fine. You may be seeing the same thing with the fixed right column. I am not sure, but I would think that it too will align to the right edge of the grid and if your other columns don't fill the left over space you are going to see a gap.

Jim Hunter

January 25,

Hi Jim,
as far as I understand, then, there's no way of having a grid with footer and rightmost fixed column correctly aligned and without scrollbars, right.
Or maybe there's some tweak I can do to the style part in order to have footers and fixed columns correctly "attached" the rest of the grid?

Thanks a lot, ciao!

Fab

Diabolik

January 26,

If you don't have scroll bars there is no need for fixed columns. What am I missing here? If the grid can't scroll then you can't tell if the column is fixed or not. As for the footer, just make your grid shorter until you close up the gap between the rows and the footer.

Jim Hunter

January 26,

Hi Jim,
I keep on missing something.

Even if I DO NOT declare fixed colums (neither left nor right) still the height is not computed well, and the vertical scrollbar appears, thus "eating" a portion of width.

Moreover, my tables will always have at least 1 header, 1 footer and 1 fixed col on the left. So, when I set footers as visible, footers are fixed by default, I cannot choose, right?

Hence, the wrong height calculation and the footer "detached" from the above grid.

Please tell me where I'm wrong...

Diabolik

February 1,

Not correct. The footer wil ALWAYS be at the bottom of the grid (grid is defined by it's width and height, not by how many rows it has) regardless of how high you make it. Change the height of your test grid to 800 and you will see what I mean. It does not 'fill in' all available space between your last row and the bottom of the grid with a footer, nor does it 'float' and align to the bottom of your last row. The footer has a fixed height (you can change it) so if you have a grid that is too tall there WILL be a gap. Just as if you declare a grid (with no footer) to be 100 pixles high but only provide 2 rows of data, there will be an empty space below the last row and above the bottom border of the grid. The grid does not auto-size to fit your data.

You asked if the footers are fixed, yes they are. If you declare a footer it will be on the bottom of the grid, and it will have a fixed height. And the footer is not 'detatched' from the grid rows, it is attached to the baseline of the grid frame.

From everything I have seen it is performing as it should and as I would expect it to.

Jim Hunter

February 1,

Hi Jim,

here posting a grid WITHOUT footers.

<html>
<head>
<title>Test grid</title>
</head>

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


<style>
                #myGrid .aw-grid-separator {
                    background: none;
                }
                
                #myGrid .aw-header-0 .aw-grid-header {
                    border: none;
                    border-bottom: none;
                    background: none!important;
                    padding: 0px 0px 1px 0px;
                }
                
                #myGrid .aw-header-0 .aw-item-box {
                    border-bottom: none;
                    background: none;
                }
                
                #myGrid .aw-header-0 .aw-mouseover-header {
                    border-bottom-color: none;
                    background: none!imporant;
                }
                
                #myGrid .aw-header-0 .aw-mouseover-header .aw-item-box {
                    border-bottom-color: none;
                    background: none;
                }
                
                
                
                /* ======================================= */
                /* alternate color for each row of data cells */
                #myGrid .aw-alternate-odd {
                    background: #eee;
                }
                
                
                
                /* ======================================= */
                /* each cell */
                #myGrid .aw-grid-cell {
                    border-top: solid darkgray 1px;
                    border-left: solid darkgray 1px;
                    font-family: "Verdana";
                    font-size: 9px;
                }			
                
                
                /* ======================================= */
                /* row headers */
                #myGrid .aw-gpanel-middle .aw-gpanel-left .aw-grid-cell {
                    background: #ced7ef!important;
                    text-align: left;
                }
                
                /* for spans in row headers */
                #myGrid .aw-gpanel-left .aw-border-false {
                    border-top: none;
                }
                
                
                
                /* ======================================= */
                /* column headers */
                #myGrid .aw-grid-headers .aw-grid-header {
                    background: #ced7ef!important;
                    border-top: solid darkgray 1px;
                    border-left: solid darkgray 1px;
                }
                
                #myGrid .aw-grid-footers .aw-grid-footer {
                    background: #ced7ef!important;
                    border-top: solid darkgray 1px;
                    border-left: solid darkgray 1px;
                }
                
            
                #myGrid .aw-gpanel-top .aw-grid-header {
                    text-align: center;
                }
                
                #myGrid .aw-gpanel-left {
                    text-align: left;
                }
                
                
                /* for spans in column headers */
                #myGrid .aw-gpanel-top .aw-border-false {
                    border-left: none;
                }	
                
                
                /* per i link */
                #myGrid .aw-grid-row a {
                    font-size:10px; color: blue; font-family: "Verdana"; text-decoration:underline;
                }
                #myGrid .aw-grid-row a: visited
                    {font-size:10px; color: blue; font-family: "Verdana"; text-decoration:underline;
                }
                
                /*	Highlight on mouseover, mousedown */
                #myGrid .aw-mouseover-row {
                    background: #ccc;
                }
                #myGrid .aw-mousedown-row {
                    background: #999;
                }
        
                /* Selected rows */
                #myGrid .aw-rows-selected {
                    background: #316ac5; font-weight: bold;
                }

            </style>
<script>
var myData = [
["RT34MASS", "", "479"],
["RS21DGRS", "", ""],
["RL36EBMS", "", ""],
["RT62KCSM", "", "999"],
["RS23KGRS", "ASSENTE", ""]
]



var myHeaders = [
["MODELLO", "PRESENZA", "PREZZO"]
]



var myFooters = [
]



var myHeadersSpans = [
["1", "1", "1"]
]



var obj = new AW.Grid.Extended;obj.setId("myGrid");obj.setFixedLeft(1);
obj.setControlSize(308, 116);
obj.setVirtualMode(false);
obj.setCellText(myData);
obj.setHeaderCount(1);
obj.defineHeaderProperty("span", "1");
obj.setHeaderText(myHeaders);
obj.setHeaderSpan(myHeadersSpans);
obj.defineCellProperty("border", function(col, row){
                if (this.getCellText(col, row) == ""){
                    return false;
                }
                else {
                    return true;
                }
                });
            obj.getCellTemplate().setClass("border", function(){
                return this.getCellProperty("border");
                });
            obj.defineHeaderProperty("border", function(col, row){
return (this.getHeaderSpan(col, row)) ? true : false;
});
obj.getHeaderTemplate().setClass("border", function(){
return this.getHeaderProperty("border");
});
obj.getHeaderTemplate().setStyle("width", function(col, row) {
var span = this.getHeaderProperty("span");
if (!span) return 0;
var i, w = 0;
for (i=0; i<span; i++) {
w += this.$owner.getColumnWidth( i + col );
}
return w;
});
obj.setHeaderHeight(18);
obj.setFooterHeight(18);
obj.setColumnCount(3);
obj.setRowCount(5);
obj.setSelectionMode("single-row");
obj.setCellValue(function(col, row){return parseFloat(myData[row][col].replace(/[^0-9.]/m, ""));}, 1);
obj.setCellValue(function(col, row){return parseFloat(myData[row][col].replace(/[^0-9.]/m, ""));}, 2);
document.write(obj);
</script>


</body>
</html>

Each column is 100px wide=300px. Try to set the control width to anything less than 308, and you will have scrollbars appearing. And I don't understand why. I'm sure I'm missing something, but please tell me what...

Ciao,

Diabolik

Diabolik

February 2,

set the width to 307 and notice the 'gap' between the scroll bar and the grid. This is a documented issue. This is most likely what is causing your problem. There is a buffer of some sort that is being calculated and added to the width of your columns causing the gap and the scroll bar. Alex informed me "all AW controls have 8px horizontal padding/border which is subtracted from the 'border width' to get 'content width' according to the standards-compliant box model."

I think this is your answer.

Jim Hunter

February 2,

Thanks, a lot, ciao.
Fab

Diabolik

February 3,

This topic is archived.

Grid size problem

See also:

Search

New Data Grid

Version 2