3.2.0

Freezing 1st column but on row select text disappears

I found on the site code to freeze a column and also code to fix the problem that I mentioned in the topic. I was able to freeze the column (1st) but when I click on the row the text in the first coulmn will disapper. I tried to add the fix that was mentioned but it did not work.

Here is my code. If anyone can help that would be great:

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden; border: none;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>

<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {text-align: center; }
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}

.active-grid-row {
height: 18px;
background: #fffFFF;
}
</style>

<!-- grid data -->
<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 Associates Inter", "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", "Adobe Systems Incorporate", "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 = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<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);

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

// replace row header text with first data column
obj.setRowProperty("text", function(i){return this.getDataProperty("text", i, 0)});

// set indices of other columns
obj.setColumnProperty("values", [1,2,3,4]);

// set headers width/height
obj.setRowHeaderWidth("100px");
obj.setColumnHeaderHeight("20px");

// 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", "100px");
corner.setStyle("height", "20px");

corner.setClass("column", "0");


// modify template-model mappings
obj.getLeftTemplate = function(){
var template = this.defaultLeftTemplate();
template.setDataModel(this.getRowModel());
template.setItemsModel(this.getRowModel());
return template;
};

// rebuild selection/value methods
obj.defineSelectionPropertyArray("value", 0);

var setSelectionValues = obj.setSelectionValues;

// include left/item refresh
obj.setSelectionValues = function(array){
var i, current = this.getSelectionValues();
setSelectionValues.call(this, array);

for (i=0; i<current.length; i++) {
this.getRowTemplate(current[i]).refreshClasses();
this.getLeftTemplate().getItemTemplate(current[i]).refreshClasses();
}

for (i=0; i<array.length; i++) {
this.getRowTemplate(array[i]).refreshClasses();
this.getLeftTemplate().getItemTemplate(array[i]).refreshClasses();
}

this.action("selectionChanged");
};

// row selection event
var selectRow = function(event){
if (event.shiftKey) {return this.action("selectRangeOfRows")}
if (event.ctrlKey) {return this.action("selectMultipleRows")}
this.action("selectRow");
};

// assign to left/item
//obj.getLeftTemplate().getItemTemplate().setEvent("onclick", selectRow);

var cell = new Active.Templates.Text;
cell.setClass("grid", "row");
cell.setClass("row", "cell");
cell.setClass("column", "0");
cell.setEvent("onclick", selectRow);
obj.setTemplate("left/item", cell);

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

</script>
</body>
</html>
Joseph
June 23,

This topic is archived.

See also:


Back to support forum