:: Forum >>

Font colors

I would like to include <font> tags inside a cell so I can make negative numbers appear red. This seems to be unsupported (I get 'undefined' instead of the table). Is there any way to change the font based on the value of the cell?
Alex Kane
Monday, November 17, 2003
I would recommend using CSS instead of inserting <font> tags. You need to define the color as a function instead of a static value and assign it to the appropriate column template.
Here is an example (Employees column):

// define dynamic color (function)
function myColor(){
var value = this.getItemProperty("value");
return value > 10000 ? "red" : "blue";
}

// get cell template of the last column
// assign new color function to the 'color' style
obj.getTemplate("cell", 4).setStyle("color", myColor);

Insert this code just after creating the grid object (before calling obj.setModel - bug there)


There was a conditional row formating example some time before:

http:/messages/?id=41



Alex (ActiveWidgets)
Monday, November 17, 2003
I inserted the code in to my document, but it is not working as planned. I changed the line:

return value > 10000 ? "red" : "blue";

to:

return value < 0 ? "red" : "black";

So that it would turn all the negative values red. Is this right? It seems like I am missing something.



// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// define dynamic color (function)
function myColor(){
var value = this.getItemProperty("value");
return value < 0 ? "red" : "black";
}

// get cell template of the last column
// assign new color function to the 'color' style
obj.getTemplate("cell", 1).setStyle("color", myColor);

// set number of rows/columns
obj.setRowCount(<sql:getCount res="daily_gr" />);
obj.setColumnCount(9);

// provide cells and headers text
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});

// set click action handler
obj.setAction("click", function(src){window.status = src.getProperty("item/text")});

// Display dates in header column
obj.setRowText(function(i){return myData[i][0]});
obj.setRowHeaderWidth("100px");

// write grid html to the page
document.write(obj);

Alex Kane
Tuesday, November 18, 2003
I just figured out why it was not working. I am formatting the numbers with commas, so it that must have screwed up the formula.

Do you know of any way that I can format the numbers with commas, and if the number is negative make it red and add parens ... (###,###.##)

-Alex
Alex Kane
Tuesday, November 18, 2003
maybe add parentheses at the server-side, then use match function to detect them?

function myColor(){
var value = this.getItemProperty("value");
return value.match(/(/) ? "red" : "black";
}

Alex (ActiveWidgets)
Tuesday, November 18, 2003
We are definately almost there, the only thing is that now it doesn't sort properly because of the parenthesis ... any ideas?
Alex Kane
Wednesday, November 19, 2003
:-(

Unfortunately this shows that the whole approach with server-side formatting is a big mess (sorry for the bad advice). Maybe I will find a way of fast number formatting in javascript (with regular expressions) and than the whole thing will be much cleaner.

In the mean time to solve your problem try this patch. It adjusts sort function to get rid of parenthesis (insert this somewhere before you create a grid object):

<script>
Active.Controls.Grid.patch = function(){
var obj = this.prototype;

obj.sort = function(index){
var a = [], direction = "ascending";
var rows = this.getRowProperty("values");

if (this.getSortProperty("index") == index) {
if (this.getSortProperty("direction") == "ascending") {direction = "descending"};
rows.reverse();
}
else {
for (var i=0; i<rows.length; i++) {
var text = this.getDataProperty("value", i, index);
var value = Number(text.replace(/[ ,]/g, "").replace(/((.*))/, "-$1"));
a[i] = isNaN(value) ? text : value;
}
rows.sort(function(x,y){return a[x] > a[y] ? 1 : (a[x] == a[y] ? 0 : -1)});
}

this.setRowProperty("values", rows);
this.setSortProperty("index", index);
this.setSortProperty("direction", direction);
};
};
Active.Controls.Grid.patch();
</script>


Alex (ActiveWidgets)
Wednesday, November 19, 2003
Thanks! This worked perfectly. I understand what you are saying about the formatting. My original idea was to do this with XML/XSL in the browser but your widget turned out to be perfectly suited for the job.

This project is great,
You are the man!
Alex Kane
Wednesday, November 19, 2003
Hi,

First, thanks Alex for this great works you do.

My question is, how can'i execute my myColor function to test column 6 in your example and change the color of the cell in a nother column 2?

Thanks a lot for your help :)
Latif
Friday, March 12, 2004
btw! it's posible pass to myColor function the ID of the row?? kinda.... myColor(i) {
if (i==2)
return red;

}

to set an specific color on a cell? ?D


Friday, March 12, 2004
http://www.activewidgets.com/messages/715-1.htm

function myColor() {
var i = this.getRowProperty("index");
if (i==2)
return red;

}
Alex (ActiveWidgets)
Saturday, March 13, 2004

This topic is archived.


Back to support forum

Forum search