Question

On a backend admin page with a grid I need to change the background color for groups of rows. Not alternate color row by row as default but coloring groups according to a known column value.

I was looking into this SO question: Approach on changing row color on orders grid in admin and other similar pages. But can’t reproduce what I need as this question refers to a value in a column that will be repeated.

I need to either use different colors for different groups or at least use alternate colors of those groups.

Maybe something like this:

Answer 1

For anyone looking for a solution. I used this tutorial on the Inchoo website: Add custom renderer for a custom column in Magento grid. There are some SO questions that also helped to understand the solution.

I didn’t manage to change the full row background color as initially wanted, I’m just modifying the cell background. But at the end, is enough to point the user that this row is somewhat different. What I have done was add a new custom column. On the renderer property I referenced a new class.

$this->addColumn('collision_type', array(
          'header'  => $helper->__('Collision'),
          'align'   => 'center',
          'index'   => 'collision_type',
          'type'    => 'action',
          'renderer'=> new Dts_Banners_Block_Adminhtml_Collisions_Grid_Renderer_Collisiontype(),
));

I placed the needed class inside a new subtree:

Grid
  └─ Renderer
        └─ Collisiontype.php

And this is the new class that should render the column. To have different colors just need to evaluate the $value variable and apply different color styles for the corresponding value, that is what I’m doing now.

<?php
class Dts_Banners_Block_Adminhtml_Collisions_Grid_Renderer_Collisiontype extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
    public function render(Varien_Object $row) {
        $value =  $row->getData($this->getColumn()->getIndex());
        return '<div style="color:#FFF;font-weight:bold;background:#F55804;border-radius:8px;width:100%">'.$value.'</div>';
    }
}
?>

And the result: