3

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

6

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');
    })
});
  • 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? :) – Celldweller May 27 '14 at 8:31
  • @Celldweller You can try to append the js script that beautifies your grid to the ajax response. – Marius May 27 '14 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 1.8.1.0: 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'); }); }}) – Doug McLean Apr 15 '15 at 16:20
0

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, privacy policy and cookie policy

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