How to Create Custom Column Renderer in magento grid

Magento Admin Grid provides the tabular data from database in grid format. This is convenient for all text data. In Some cases we may have other data type to be shown in grid which is not plain text data. For example Image data.

For this purpose magento provides us the flexibility to define our own column renderer. We can use this to add additional markup before and after the required data.

In this article we will see how to add our own column renderer to show an image file in our custom module. I’ll cover only the portions that show the image in admin grid. After adding our basic skeleton module. we need to do a few additional steps.

Step 1: In this step we are adding and saving some test data. Initially our grid will display only the image name.

Step 2: Our Admin Grid coding initally looks as show below

Lets assume that our image data is named filename.

Step 3: Now we need to create a block class that takes care of rendering the image data. Our custom renderer class should override the render method in the base class Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
The block class will add the required markup and returns the image path as shown below. We assume that the image is uploaded in the media directory.

Step 4: Rewrite the code of admin grid to include the custom renderer as shown

Step 5: After clearing the cache and refreshing the page the grid looks as shown below.

Compatability: Magento