How do add custom renderer for a custom column in Magento grid ? || Adding thumbnail image to magento admin grid column

To add additional column to your grid and add custom renderer, you need to open your grid block from required module. Let me explain with custom module to add additional column.

My custom module Structure

• Custom
• -Sample
• --Block
• ---Adminhtml
• ----Sample
• -----Grid.php

We need to work on the Grid.php file.This file contains different type of functions to display content in the grid.We need to search _prepareColumns() functions and work on that..

I already contain some columns to display informations.First I will show one from this grid.

For Example : ------------ We have to see how do add image in the admin grid.

Open Grid.php and search _prepareColumns() functions.Now we need to add one column .Paste the following line in this function.

$this->addColumn('image', array(
'header' => Mage::helper('sample')->__('Image'),
'align' => 'left',
'width' => '100px',
'index' => 'filename', // variable name of the image.This field information comes from modal.
'renderer' => 'Custom_Sample_Block_Adminhtml_Sample_Renderer_Image',
'attr1' => 'value1' // We don't use this now
));

I already told about my custom module structure.Now we need to create one 'Renderer' folder within Sample Block folder,and create one 'Image.php' file within Renderer folder

• Custom
• -Sample
• --Block
• ---Adminhtml
• ----Sample
//Block
• -----Renderer
• ------Image.php
• -----Grid.php

Now open Image.php And add the following files
class Custom_Sample_Block_Adminhtml_Sample_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract{
public function render(Varien_Object $row)
{
$html = '<img ';
$html .= 'id="' . $this->getColumn()->getId() . '" ';
$html .= 'src="' . Mage::getBaseUrl('media').$row->getData($this->getColumn()->getIndex()) . '"';
$html .= 'class="grid-image ' . $this->getColumn()->getInlineCss() . '"/>';
return $html;
}
}
Reference:

• http://inchoo.net/magento/how-to-add-custom-renderer-for-a-custom-column-in-magento-grid/
• https://nikunjvadariya.wordpress.com/2013/06/13/magento-adding-thumbnail-image-to-magento-admin-grid-column/