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




which leads to


which calls


This leads to


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

2 Answers 2


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


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() {
         var value = $(elem).innerHTML;
         var class = calculate class here depending on 'value'
  • Thanks Marius! Meanwhile I chose the Javascript approach. With a frameback_call I wrapped the value with a div with a class and the rest is done via javascript. But I encountered a new problem. When you click on the buttons (e.g. reset filter) the backend uses ajax in order to switch content. This destroys my visual manipulations. Unfortunately, it does not seem to work when I try to catch this with Prototype's Ajax.Responders.register() function. Any idea to that? :) May 27, 2014 at 8:31
  • @Celldweller You can try to append the js script that beautifies your grid to the ajax response.
    – Marius
    May 27, 2014 at 8:38
  • @Marius that is genius! @Celldweller for the ajax reload, it might depend on what part of the admin panel you're in, or even what version of Magento are you using... it worked for me in the orders grid on CE Ajax.Responders.register({onComplete: function() { $$('td.has_dynamic_class').each(function(elem){ var value = $(elem).innerHTML; var class = calculate class here depending on 'value' $(elem).addClassName('class'); }); }}) Apr 15, 2015 at 16:20

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.