Add custom css class to backend grid cell under certain conditions

Question

I am looking for a way to add a custom css class to a backend grid cell when it has a specific value.

I know I have the option to use a renderer and I also could use the frameback_call options in addColumns (and of course if I would like to change every row in a column I would just use column_css_class option within addColumn()) but my problem is that these would only give me the possibility to add a div wrapper or something like that. What I really like to do is to add the custom css class to the surrounding td tag. What is the best way to do this?

It seems the problem is that

app/design/adminhtml/default/default/template/widget/grid.phtml

calls

_column->getCssProperty() 

which leads to

\Mage_Adminhtml_Block_Widget_Grid_Column::getCssProperty

which calls

$this->getRenderer()->renderCss();

This leads to

\Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract::renderCss

This has no parameter for $row or similar und does not seem to be able to use row-specific data.

Any ideas?

Thanks in advance! :)

Answer 1

It seams that there is no way to add a class to the td element depending on the value in that cell.
The alternative would be to use your own grid template.

Clone grid.phtml in an other template file, do your modifications there and in the grid block of your module add this in the constructor after calling parent::__construct():

$this->setTemplate('path/to/your/grid.phtml');

An other option would be to use javascript:

Add a class to the column you want to have a class depending on the value.

   $this->addColumn('code_here', array(
        'header'    => $this->__('label here'),
        'index'        => 'code_here',
        'column_css_class' => 'has_dynamic_class'
    ));

Then add a js in your page in the header with something like this:

Event.observe(window, 'load', function() {
    $$('td.has_dynamic_class').each(function(elem){
         var value = $(elem).innerHTML;
         var class = calculate class here depending on 'value'
         $(elem).addClassName('class');
    })
});

Answer 2

There is a more elegant approach without hacking anything.
First you need to add the class to your specific row by adding this in your Widget_Grid:

public function getRowClass($row)
{
    return $row->getId() == 123 ? 'selected-row-class' : '';
}

This will add a specific class selected-row-class on your .

Then on your addColumn add

$this->addColumn('my_col', [
    'header' => 'Col Name',
    'index' => 'my_col',
    'column_css_class' => 'my-specific-col'
]);

This will add the class my-specific-col to your full .
Then it's just some simple CSS:

.selected-row-class.my-specific-col {
    background-color: pink;
}