Header Height problem

Hi,

I have a problem in setting the header 0 height. When I try to set it with a dimension smaller than 10 pixel, the grid display over the header a blank area.

I'm using IE6.

<html> 
<head> 
<script src="./runtime/lib/aw.js"></script> 
<link href="./runtime/styles/xp/aw.css" rel="stylesheet"></link> 
</head> 
<body> 
    <style> 
 #Mygrid { font: menu ; margin: 3px 3px 3px 3px;  }  
 #Mygrid .aw-alternate-even {    BACKGROUND: #f0fff0 } 
 #Mygrid .aw-alternate-odd { BACKGROUND: #ffffafa } 
 #Mygrid .aw-mouseover-row { BACKGROUND: #b0e0e6; CURSOR: hand } 
 #Mygrid .aw-rows-selected {    BACKGROUND: #008b8b } 
 #Mygrid .aw-item-text { vertical-align: top; }  
 #Mygrid2 { font: menu ; margin: 3px 3px 3px 3px;} 
</style> 
<script> 
var myData = [ 
["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 AssociatesInter", "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", "AdobeSystemsIncorporate", "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"], 
["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 myColumns = [ "H1", "H2", "H3" ,"H4" ]; 
         
</script> 
</head> 
<body> 
    <script> 

    var obj = new AW.Grid.Extended;
    obj.setId('Mygrid'); 
    obj.setCellText(myData); 
    obj.setRowCount(20); 
    obj.setColumnCount(5); 
    obj.setHeaderCount(2); 
    obj.setHeaderHeight(5,0); 
    obj.setHeaderHeight(20,1); 
    obj.setHeaderText(myColumns,1); 
    obj.setCellEditable(false); 
    obj.setControlSize(500, 300); 
    	
document.write(obj); 

</script> 
</body> 
</html>

Anyone have any ideas to remove it?

MP

March 22,

For starters, if you don't want a header why do you have it set for 2 header rows? I just tried one header row and setting the header height to 0 and it worked fine. I think what you need to have is:

obj.setHeaderCount(1);  
obj.setHeaderHeight(0);  
obj.setHeaderText(myColumns,1);  // don't know why you want to set headers if they aren't going to show?

Jim Hunter (www.FriendsOfAW.com)

March 22,

Hi Jim,

Thanks for your answer. Let me now explain what Im thinking in details.

I want a header containing column titles, but I dont want it in the header0. I need the header in the grid, so I can use the header0 only for sorting and resizing.

This could seem a strange idea, but its very important for the web application Im developing.

When I reduce the header0 height, the header content is shifted to the bottom and some words become hidden by the first row.

Look at this example, please:

<html>
<head>
<link href="styles/xp/aw.css" rel="stylesheet"  ></link>
<script type="text/javascript" src="aw.js"></script>
<title>TopLogo</title>
<script type="text/javascript">
var Headers =["Fatturato", "Gen.98<br> Fr.", "Feb.98<br> Fr. ", "TOTALE<br> Fr."];

var Data =[
[" Biscotti", "1143.5", "1099.3", "2242.8"],
[" Brioches", "4808.6", "3735.4", "8544.0"],
[" Crackers", "177.6", "113.2", "290.8"],
[" Grissini", "630.5", "429.7", "1060.3"],
[" Torte Pronte", "2501.9", "1833.8", "4335.8"],
[" Snacks Dolci", "1267.7", "1022.8", "2290.5"],
[" Snacks Salati", "322.8", "228.2", "551.1"],
[" Tavolette", "5857.0", "5301.2", "11158.2"],
[" Praline", "3632.5", "3275.7", "6908.1"],
["TOTALE", "20342.1", "17039.4", "37381.6"]
];


var Type = ["1","0","0","0"];
var Left = "5px";
var Top = "70px";
var Width = "500px";
var Height = "320px";

function setStyle(gridId,myType,width,height,top,left){
    var style="<style>\n";
    style+="#"+gridId+" {"+setPosition(left,top,width,height)+" border: 1px inset; background: white;}\n";
    style+="#"+gridId+" .aw-column-0 {background-color: threedlightshadow;}\n";
    style+=setAlignStyle(gridId,myType);
    style+="#"+gridId+" .aw-header-1 {border-right: 1px solid threedlightshadow; border-bottom: 1px solid threedlightshadow;}\n";
    style+="#"+gridId+" .aw-grid-headers {background-color: threedlightshadow;}\n";
    style+="#"+gridId+" .aw-grid-header {text-align: center}\n";
    style+="</style>";
    document.write(style);
}


function setPosition(left,top,width,height){
    var strReturn="";
    strReturn+="position: absolute; ";
    strReturn+="left: "+left+"; ";
    strReturn+="top: "+top+"; ";
    strReturn+="width: "+width+"; "
    strReturn+="height: "+height+";";
    return strReturn;
}



function setAlignStyle(gridId,arrAlign){
    var strStyleAlign="";
    for(var i=0;i<arrAlign.length;i++){
        if(arrAlign[i]==0){
            strStyleAlign+="#"+gridId+" .aw-column-"+i+" {text-align: right;}";
        }
        else if(arrAlign[i]==1){
            strStyleAlign+="#"+gridId+" .aw-column-"+i+" {text-align: left;}";
        }
        else if((arrAlign[i]==2)||(arrAlign[i]==3)){
            strStyleAlign+="#"+gridId+" .aw-column-"+i+" {text-align: center;}";
        }
    }
    return strStyleAlign;
}



function createTopTable(myGrid,topLogo,topTitle,logoWidth){
    var topTable="<TABLE height=\"100%\" width=\"100%\" cellPadding=\"0\" cellSpacing=\"0\" border=\"0\" bgcolor=\"threedlightshadow\"><TR>";
    topTable+="<TD align='center' width=\""+logoWidth+"px\">"+topLogo+"</TD>";
    topTable+="<TD align='left'>"+topTitle+"</TD>";
    topTable+="</TR></TABLE>";
    return topTable;
}


function setToolbarTemplate(myGrid,topHeight,topLogo,topTitle,logoWidth){
            var topTable=createTopTable(myGrid,topLogo,topTitle,logoWidth);
            myGrid.defineTemplate("topLine",function(){return topTable});
            myGrid.defineTemplate("bottomLine",function(){return "bottom"});
            myGrid.setLayoutTemplate(new AW.Panels.Horizontal);
            myGrid.setPanelTemplate(function(i){
                switch(i){
                    case 0: return this.getTopLineTemplate();
                    case 1: return this.getScrollTemplate();
                    case 2: return this.getBottomLineTemplate();
                }
            });
            myGrid.setPanelHeight(topHeight,0);
            myGrid.setPanelHeight(20,2);
}


function createTable(gridId,myHeaders,myData,myType,top,left,width,height,dispColHdr,dispRowHdr, topHeight, topLogo, topTitle){
        
        setStyle(gridId,myType,width,height,top,left);
        
        var obj1 = new AW.Grid.Extended;
        obj1.setId(gridId);
        obj1.setRowProperty("count", myData.length);
        obj1.setColumnProperty("count", myHeaders.length);
        obj1.setCellData(myData);
        
        obj1.setHeaderCount(2);
        obj1.setHeaderText(myHeaders,1);
        obj1.getHeadersTemplate().setClass("text", "wrap");	// multiline text
        if(dispColHdr){
            obj1.setHeaderHeight(15,0);
        }
        else{
            obj1.setHeaderHeight(5,0);
        }
        obj1.setHeaderHeight(35, 1); 

        //---------------------------------
        var selectorWidth=25;
        if(dispRowHdr){
            obj1.setSelectorVisible(true);
            obj1.setSelectorText(function(i){return this.getRowPosition(i)+1});
            obj1.setSelectorWidth(selectorWidth);
        }		
        //-----------------------------------------
        setToolbarTemplate(obj1,topHeight,topLogo,topTitle,100);
        //-----------------------------------------
                
        document.write(obj1);
}
</script>
</head>
<BODY>
<script type="text/javascript">
createTable("01",Headers,Data,Type,Top,Left,Width,Height,false,true,50,"<img src=\"Logo.gif\">","This is a Toptitle");
createTable("02",Headers,Data,Type,Top,"500px",Width,Height,true,true,50,"<img src=\"B56/BoardLogo.gif\">","This is a Toptitle");
</script>
</BODY>
</html>

Do you see a blank area between the top title and the header?

Michele

March 23,

This seems to be some strange IE CSS bug. You can fix it adding the following rule -

.aw-gpanel-top .aw-templates-list {
    background-image: none;
}

Alex (ActiveWidgets)

March 23,

This topic is archived.

Header Height problem

See also:

Search

New Data Grid

Version 2