Clicking Row Headers

Hi,
I love this control! But I feel like a babe in Toyland trying to figure out all the functions. I've looked through the tutorial and reference and forums but I can't find what I'm looking for.
I'd like to use the grid as an expanded selector, that is I'd like row selections to fire events on the rest of the page. To do this I need to capture click events on the row headers as well as the rows and read and change the row header properties.
I got (I believe) the click event with ...

var leftItem = new Active.Templates.Item;

    leftItem.setEvent("onclick", function(src){alert(src.getLeftProperty("index"));});

    results.setTemplate("left/item", leftItem);

This registers the even but what is the source? What properties does it have?
I'd like to make the row header look pressed as well as make the grid row look selected and then pass a value to another function.
I can handle the passing values part but I don't know what to do with the source.
Is there a better way to set up the event capture?

help!

Is there a way to get the row index from the row header? I think I can do this if I can retrieve that number.

This seemed simple but is much harder than I thought! Any ideas?

I'd just like to change the appearance of the row header to look pressed when the corresponding row is selected.

Hi,

well try using the code below hope this is what you are looking:

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {font: menu; background: threedface;} </style>


<link href="runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/lib/grid.js"></script>


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

The above program works fine on click the row text color changes
to white. Is there any one who can help me in setting the color of the
row text on selection to red instead of white as it is more visible.
Thanx

You can replace the row header template and definine events like this

var rowheader = new Active.Templates.Item;



        rowheader.setEvent("onmousedown", function(event){

            var row = this.getProperty("item/index");  //clicked row index

            if (event.button == 2){

                 alert("right click");

            }

            else{

                 alert("not right click");

            }

        });



        obj.setTemplate("left/item", rowheader);

and capture the row index by using getProperty. I use getProperty because I've disabled row selection in my grid.

Thanks Risha! That was perfect!!!
I control the whole row appearance with setClass...

.active-scroll-left .active-selection-true {
position: relative; /* for z-index to work */
overflow-y: hidden; /* for auto-size, overflow:hidden is 30% faster */
height: 18px;
width: 100%;
vertical-align: top;
border-width: 1px;
border-style: solid none none none;
border-color: #cbc7b8;
padding-bottom: 1px;
}
.active-scroll-left .active-selection-true .active-box-item {
background-color: #d6d2c2!important;
}

I just can't figure out where the blue line is coming from!!!

Perfection is always one step away!

Got it. I needed to add !important to the background-color to override the other rule!

.active-scroll-left .active-selection-true {

  position: relative; /* for z-index to work */

  overflow-y: hidden; /* for auto-size, overflow:hidden is 30% faster */

  height: 18px;

  width: 100%;

  vertical-align: top;

  border-width: 1px;

  border-style: solid none none none;

  border-color: #a6a292;

  padding-bottom: 1px;

[b]  background-color: transparent!important;[/b]

}

Hi Mark,
The Solution what you gave is fine but
how do I define the style to the row header to change the text
color to red.
Thanx in advance.

Thanx Dav !!
Your solution worked for me .

Try something like...

var rowheader = new Active.Templates.Item;



rowheader.setEvent("onmousedown", function(event){

            rowheader.setStyle("color", "red");

            obj.refresh();

}); 



obj.setTemplate("left/item", rowheader);

Forum search