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!

Dav

April 8,

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.

Dav

April 12,

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.

Dav

April 12,

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>

Risha

April 13,

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

Risha

April 13,

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.

Mark

April 13,

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

Dav

April 13,

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

Perfection is always one step away!

Dav

April 13,

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

Dav

April 13,

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.

Risha

April 14,

Thanx Dav !!
Your solution worked for me .

Risha

April 14,

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

Mark

April 14,

Thanx Mark !!

Risha

April 15,

This topic is archived.

Clicking Row Headers

See also:

Search

New Data Grid

Version 2