Magento – How to add a custom render to a custom column in the orders grid

adminhtmlmagentorender

For a Magento website, I would like to show custom options in the orders grid in the backoffice.

Currently, I've successfully added a custom column to the grid with the help of this guide and this guide, using a module to avoid to rewrite the core classes.

Now, I've a long string appearing in a column and I would like to serialize it to have the custom options, but I can't manage to use a custom renderer.

/app/code/local/Atwix/ExtendedGrid/Helper/Data.php :

public function getProductOptionsColumnParams()
{
    return array(
        'header' => 'Products Options',
        'index' => 'product_options',
        'type' => 'text',
        'renderer' => array('Atwix_ExtendedGrid_Model_Observer', 'render'),
    );
}

I've added a renderer which links to the Model Observer (/app/code/local/Atwix/ExtendedGrid/Model/Observer.php), but this doesn't work, it only shows a white page instead of the table…

Where did I do a mistake ? The "render" function cannot be in the Observer ? I tried to create a class which extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract in /app/code/local/Mage/Adminhtml/Block/Sales/Order (near to Grid.php) but it doesn't work either.

UPDATE 1 :

It doesn't work, I've created the file /app/code/local/Atwix/ExtendedGrid/Block/Adminhtml/ExtendedGrid/Renderer/Renderer.php with the code :

class Atwix_ExtendedGrid_Block_Product extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
    public function render(Varien_Object $row) {
        $value =  $row->getData($this->getColumn()->getIndex());
        return '<span style="color:red;">'.$value.'</span>';
    }
}

And in /app/code/local/Atwix/ExtendedGrid/Helper/Data.php I have this code :

class Atwix_ExtendedGrid_Helper_Data extends Mage_Core_Helper_Abstract
{
    /**
     * parameters for addColumnAfter method
     * @return array
     */
    public function getSkusColumnParams()
    {
        return array(
            'header' => 'SKUs',
            'index' => 'skus',
            'type' => 'text',
            'filter_condition_callback' => array('Atwix_ExtendedGrid_Model_Observer', 'filterSkus'),
        );
    }
    /**
     * parameters for addColumnAfter method
     * @return array
     */
    public function getProductOptionsColumnParams()
    {
        return array(
            'header' => 'Products Options',
            'index' => 'product_options',
            'type' => 'text',
            'renderer' => array('Atwix_ExtendedGrid_Block_Product', 'render'),
        );
    }
}

Best Answer

I used a way easier approach to the color. first I override the core grid on my local folder: 

app/code/local/Mage/Adminhtml/Block/Sales/Order/Grid.php

Then I added my custom column and added the renderer attribute to it. 

       $this->addColumn('fee_amount', array(
        'header' => Mage::helper('sales')->__('Amount to be Paid Later'),
        'index' => 'fee_amount',
        'filter_index'=>'fee_amount',
        'type'  => 'currency',
        'currency' => 'base_currency_code',
        'width' => '80px',
        'renderer'  => 'Mage_Adminhtml_Block_Sales_Order_Renderer_Red',

    ));

Then create Red.php under

app/code/local/Mage/Adminhtml/Block/Sales/Order/Renderer/Red.php

On red.php i added the following: 

class Mage_Adminhtml_Block_Sales_Order_Renderer_Red 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: 40%;margin-left: 40px;">$'.number_format( $value , 2).'</div>';


      }
}
Related Topic