ActiveWidgets • Header Height problem

More information on this topic is available in the documentation section: /aw.grid.header/.

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?

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?

Hi Jim,

Thanks for your answer. Let me now explain what I�m thinking in details.

I want a header containing column titles, but I don�t 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 it�s very important for the web application I�m 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?

Header Height problem

Documentation:

Forum search