Freeze column one can't wrap header (corner) text
I followed the instructions in http://www.activewidgets.com/messages/1393-4.htm 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?
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,