3.0 beta 2

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>

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

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.