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?

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

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

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

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

We are definately almost there, the only thing is that now it doesn't sort properly because of the parenthesis ... any ideas?

:-(

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>

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!

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

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

http://www.activewidgets.com/messages/715-1.htm

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

}