:: Forum >>

How do I programaticaly change the row header style on select.

Hi Friends,
How do I programaticaly change the row header style on select.
On select of the row header I want the row header text to change color to red.
Thanx in advance.
Thursday, April 14, 2005
I want to change the color of row header text on selection from white
to red...
The Code:
<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 -->
#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;}


// 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";

<center><p><b>Grid Data Displayed From EXCELL CSV(Comma Seperated Values) File </b></p></center>

// 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

// 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();
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++) {

for (i=0; i<array.length; i++) {


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

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


var row = new Active.Templates.Row;

// provide column labels
obj.setColumnProperty("texts", columns);

// provide external model as a grid data source

// write grid html to the page



Thursday, April 14, 2005
Thanx Everybody I found the solution.
I have done it using style.
Thursday, April 14, 2005

This topic is archived.

Back to support forum

Forum search