Setting the bg color of an entire row or cell in the grid

[arnair]

Hi all - I wanted to color an entire row (ygrid-row) or a cell (ygrid-col) based on the value of a cell.

So for example if you take a look at Jack's original post about his grid component, he uses a custom renderer to color the text in the 'change' column red if the cell value is negative.
http://www.jackslocum.com/yui/2006/08/30/a-grid-component-for-yahoo-ui-extensions-v1/

Instead, if the cell value is negative, I want to change the bg color of either the entire cell or the entire row to red. Any suggestions? TIA.

[jack.slocum]

The render() method is passed the rowIndex and colIndex of the data being rendered. You can use those values along with grid.getRow(index) to set any styles on the row in your renderer.

[arnair]

Hmm that doesn't seem to work. grid.rows.length seems to be 0 within the renderer, perhaps because the row is added to the DOM only after the renderer is invoked for all the columns in the row?

From GridView.js:

insertRows : function(dataModel, firstRow, lastRow){
...
var row = document.createElement('span');
...
this.renderRow(dataModel, row, rowIndex, colCount, renderers, dindexes);
..
bt.appendChild(row);
...
}

[jack.slocum]

I didn't even think of that. Maybe it's time to override renderRow.


myGrid.renderRow = function(dataModel, row, rowIndex){
YAHOO.ext.grid.GridView.prototype.renderRow.apply(this, arguments); // pass all args
YAHOO.util.Dom.addClass(row, 'foo');
row.childNodes[3].style.color = 'red';
}

[arnair]

Thanks Jack - think I'm getting real close.

The last stumbling block I have is that I guess renderRow is on the GridView and not the Grid, so I need to replace myGrid.view.renderRow with my custom impl. However, myGrid.view is not initialized until myGrid.render() is called, but by then it's too late and renderRow has already been called for all the rows.

I guess I could call render(), replace view.renderRow, then call render() again but it seems hacky (and didn't work either for some reason).

Note that I did get this to work by replacing YAHOO.ext.grid.GridView.prototype.renderRow, but then that affects all other grids on the page. Any suggestions?

[jack.slocum]

Sorry about the bogus advice. You are right. This would work:

grid.view = new YAHOO.ext.grid.GridView();
grid.view.renderRow = function(...){ ... };

grid.render();

[arnair]

That worked beautifully. Don't know why I didn't think of just initializing grid.view manually and then replacing its renderRow... Thanks for the help Jack.

[arnair]

Ahem - one last thing :) Sorting the grid screws up the coloring, as the row/cell maintains the bg color set using the initial cell value at that row index. How should I handle that?

[jack.slocum]

Ah, yeah you are pretty much screwed there. It reuses the existing cells on a sort. But you could try this (it would cause a rerender on sort):


view.handleSort = function(dm){
this.renderRows(dm);
this.updateHeaderSortState();
};

[arnair]

Awesome - it works! Actually I changed it a bit - your version caused a flickering of the striped rows on sort as their bg gets cleared & then repainted. Not sure though if mine has some issues, haven't run into any so far...

view.handleSort = function(dm){
this.renderRows(dm);
YAHOO.ext.grid.GridView.prototype.handleSort.apply( this, arguments );
}

[masudkuet]

grid.view.renderRow = function(...){ ... };

grid.render();
works fine for this purpose but for paged grid paging toolbar vanishes.

how can we overcome the problem with paging toolbar?

[masudkuet]

sorry for distrubing .....

searching the documentation I found YAHOO.ext.grid.PagedGridView for this purpose.

thanks.

[dgarcia]

I've been searching on how to change the background and text color of a grid's cell and found this site. I'm brand new to cfgrid and Ext. My grid is working; I just need the part on how to change the background and text color.

I'd like to use a CSS like this:
<style type="text/css">
.red{background-color:#FF0000!important; color:#FFFFFF;}
.green{background-color:#00FF00!important; color:#FFFFFF;}
.yellow{background-color:#FFFF00!important; color:#000000;}
</style>

The link above referencing the example code gives a "NOT FOUND" error. Can you provide a complete example of the final solution? It will save me tons of hours and aggravation trying to figure out how to set the color for a cell; the contents of the cell is actually the color (i.e. red, green, yellow, null/no color). Thanks.