Magento – Add Custom CSS Class to Backend Grid Cell

gridorder-grid

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! 🙂

Best Answer

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');
    })
});

Related Solutions

Magento – Adding a column to export but hiding from the grid

Create a separate block definition - e.g. duplicate the Grid block to another block that's specific for your CSV; I would call this Csvgrid.php instead of Grid.php - it would contain all of the same functionality that the normal Grid.php contains, but omit the one column.

In your controller:

public function exportCsvAction()
{
        $fileName = 'myreport_'.date('Y_m_d_h_i_s').'.csv';
        $content = $this->getLayout()->createBlock('mymodule/adminhtml_reports_csvgrid')->getCsv();
}

When duplicating the Grid, place Csvgrid.php into the same physical directory as Grid.php but rename it accordingly - don't forget to change the class name!

Edit:

So it turns out that Mage_Adminhtml_Block_Widget_Grid has a method called removeColumn - defined as:

/

**
     * Remove existing column
     *
     * @param string $columnId
     * @return Mage_Adminhtml_Block_Widget_Grid
     */
    public function removeColumn($columnId)
    {
        if (isset($this->_columns[$columnId])) {
            unset($this->_columns[$columnId]);
            if ($this->_lastColumnId == $columnId) {
                $this->_lastColumnId = key($this->_columns);
            }
        }
        return $this;
    }

My guess is that because Mage_Adminhtml_Block_Report_Grid extends Mage_Adminhtml_Block_Widget_Grid it inherits this method and should be able to be used. I would, in that case, create a new block Grid and extend the Grid that your current report is in. From there you can use your own prepareColumns method, call the parent::_prepareColumns() and then call removeColumn..

Best of luck.

Magento – Admin Grid – Assign CSS class to new orders

You should do it in the grid template instead. You can add a new id to the order's row 'tr' . As an example, we'll highlight the orders placed in the last 24 hours.

Go to app/design/adminhtml/default/default/template/widget/grid.phtml. Starting in line 154:

...
<?php foreach ($this->getCollection() as $_index=>$_item): 
        $orderCreateAt = strtotime($_item->getCreatedAt());
        $last24hours = strtotime('24 hours ago'); ?>
        <tr id ="
        <?php if($orderCreateAt > $last24hours)
            { echo 'new-order'; }
        ?>"
        title="<?php echo $this->getRowUrl($_item) ?>"<?php if ($_class = $this->getRowClass($_item)):?> class="<?php echo $_class; ?>"<?php endif;?> >
...

Now defying the style in css should be straightforward. Go to skin/adminhtml/default/default/boxes.css and add the style you'd like to have

.grid table tr#new-order{
    background-color: #FF0000;
}

Best Answer

Related Solutions

Magento – Adding a column to export but hiding from the grid

Magento – Admin Grid – Assign CSS class to new orders

Related Topic