I want to change the color of row header text on selection from white
to red...
The Code:
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/lib/grid.js"></script>
<!-- grid format -->
<style>
#grid1 .active-row-highlight {background-color: #E8E7D2}
#grid1 .active-row-highlight .active-row-cell {background-color: #E8E7D2}
#grid1 {height: 165px; border: 2px inset; background: white}
#grid1 .active-column-1 {width: 200px; background-color: #F3F8FE;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
</style>
<script>
// For Setting Alternate Row Colors
var alternate = function(){
return this.getProperty("row/order") % 2 ? "#EEEAD5" : "#FDFBEC";
}
// Condition based font changing of Cols
function myColor(){
var value = this.getItemProperty("value");
return value > 10000 ? "red" : "blue";
}
</script>
</head>
<body>
<center><p><b>Grid Data Displayed From EXCELL CSV(Comma Seperated Values) File </b></p></center>
<script>
// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;
// provide data URL - plain text comma-separated file
table.setURL("../data/companies.csv"); // for readung data from text file : chng extension
// start asyncronous data retrieval
table.request();
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create ActiveWidgets Grid javascript object
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// 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);
obj.setId("grid1");
var row = new Active.Templates.Row;
// provide column labels
obj.setColumnProperty("texts", columns);
// provide external model as a grid data source
obj.setDataModel(table);
// write grid html to the page
document.write(obj);
</script>
</body>
</html>