Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1

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

    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/0...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.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    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.

  3. #3

    Default

    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:
    Code:
    insertRows : function(dataModel, firstRow, lastRow){
       ...
       var row = document.createElement('span');
       ...
       this.renderRow(dataModel, row, rowIndex, colCount, renderers, dindexes);
       ..
       bt.appendChild(row);
       ...
    }

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

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

    Code:
    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';
    }

  5. #5

    Default

    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?

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

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

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

    grid.render();

  7. #7

    Default

    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.

  8. #8

    Default

    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?

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

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

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

  10. #10

    Default

    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...
    Code:
    view.handleSort = function(dm){
        this.renderRows(dm);
        YAHOO.ext.grid.GridView.prototype.handleSort.apply( this, arguments );
    }

Page 1 of 2 12 LastLast

Similar Threads

  1. setting ids on grid rows...
    By sean in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 29 Mar 2007, 7:14 AM
  2. grid bug: mouseout of the first row keeps hover color
    By simeon in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 12 Mar 2007, 8:14 PM
  3. how does the grid fill the entire panel area?
    By vupt in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Mar 2007, 9:24 AM
  4. Flip font color in the grid (for a link)
    By albansg in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 29 Nov 2006, 6:12 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •