3.0 beta 2

Freeze column one can't wrap header (corner) text

I followed the instructions in /datagrid.1393/ to freeze the first column. However my default column height is 40px, that is allowing 2 lines of text wrapping in each column header. However, the wrapping for the header of the first column is not working.

Finally I find this is related to the css. What is the correct css for the corner?
.active-scroll-top .active-box-image {height: 1em}


<style>
.active-controls-grid { font-size=11; height: 100%; font: menu; }
.active-grid-column { font-family=Arial; font-size=11; border-right: 1px solid threedlightshadow; }
.active-grid-row { font-family=Arial; font-size=11; height: 17px; background: white; border-bottom: 1px solid threedlightshadow; border-right: 1px solid threedlightshadow; }
.active-grid-row .active-list-item, .active-scroll-left .active-list-item {height: 17px;} 
.active-scroll-top .active-box-image {height: 1em}
</style>

<script>
    var myData = [
        ["MSFT","<font color=red>Microsoft Corporation</font>", "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", "<a href=http://www.yahoo.com>Electronic Arts Inc.</a>", "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", "a"],
        ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "3647"],
        ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
        ["PSFT", "PeopleSoft, Inc.", "8,246.467", "-", "8180"],
        ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
        ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
        ["SNPS", "", "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 = [
        "Ticker<br>Ticker", "Company<br>Name", "Market Cap.", "$ Sales", "Employees"
    ];
    
</script>

<body>
<a href=http://www.yahoo.com>Electronic Arts Inc.</a>
<script>
//	create ActiveWidgets Grid javascript object

var obj = new Active.Controls.Grid;

//	set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);

//	set headers width/height
obj.setRowHeaderWidth("80px");
obj.setColumnHeaderHeight("34px");

//	replace row header text with first data column
obj.setRowProperty("text", function(i){return this.getDataProperty("text", i, 0)});
//	set indices of other columns (hide column 0)
obj.setColumnProperty("values", [1,2,3,4]);

//	define template for the first column header
obj.defineTemplate("corner", new Active.Templates.Header);
//	assign this template as the content of top left corner
obj.getLayoutTemplate().setContent("corner", function(){return this.getCornerTemplate(0)});

//	adjust header template
var corner = obj.getCornerTemplate();
//	redirect item property requests to column property
corner.getItemProperty = function(name){return this.getColumnProperty(name, 0)};
//	disable resizing
corner.getContent("div").setEvent("onmousedown", null);
corner.getContent("div").setStyle("cursor", "default");
// set width and height
corner.setStyle("width", "80px");
corner.setStyle("height", "34px");
corner.setClass("column", "0");

//	provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

obj.setDataProperty("value", function(i,j){ 
    var text = "" + this.getDataText(i, j); 
    if (text.match(/^\s*$/)) {return ""} 
    var value = Number(text.replace(/[ ,%\$]/gi, "").replace(/\((.*)\)/, "-$1")); 
    return isNaN(value) ? -999999999 : value; 
}); 

//	assign row selection event to left/item (cell)
var cell = new Active.Templates.Text;
cell.setClass("grid", "row");
cell.setClass("row", "cell");
cell.setClass("column", "0");
obj.setTemplate("left/item", cell);

//	write grid html to the page
document.write(obj);
</script>

</body>
Henry Ng
November 6,
I figured out to add this in the css and seems working.... any better way in doing this?

.active-box-image {height: 1em}
Henry Ng
November 6,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.