Add custom renderer for a custom column in Magento grid

Related Inchoo Services

Every now or then we need new column on some grid listing in Magento. It is quite simple task, but you will probably want to format values way you want or whatever.
This is where writing your own renderer would be usefull and simple.

To pull this out, you would overide some grid, add column to it and write custom renderer.

How it works in real life situations.?!
Let’s take a look at product listing admin grid.
Overide block class called Mage_Adminhtml_Block_Catalog_Product_Grid located in /app/code/core/Mage/Adminhtml/Block/Catalog/Product/Grid.php file.

We won’t rewrite this block in this post, but this post assumes you know how to do it yourself.
Modify _prepareCollection() method with new data, for example let’s add short description of a product:

protectedfunction _prepareCollection(){$store=$this->_getStore();$collection= Mage::getModel('catalog/product')->getCollection()->addAttributeToSelect('sku')->addAttributeToSelect('name')->addAttributeToSelect('short_description')// THIS IS WHAT WE HAVE ADDED->addAttributeToSelect('attribute_set_id')->addAttributeToSelect('type_id')->joinField('qty','cataloginventory/stock_item','qty','product_id=entity_id','{{table}}.stock_id=1','left');if($store->getId()){//$collection->setStoreId($store->getId());$collection->addStoreFilter($store);$collection->joinAttribute('custom_name','catalog_product/name','entity_id',null,'inner',$store->getId());$collection->joinAttribute('status','catalog_product/status','entity_id',null,'inner',$store->getId());$collection->joinAttribute('visibility','catalog_product/visibility','entity_id',null,'inner',$store->getId());$collection->joinAttribute('price','catalog_product/price','entity_id',null,'left',$store->getId());}else{$collection->addAttributeToSelect('price');$collection->addAttributeToSelect('status');$collection->addAttributeToSelect('visibility');}$this->setCollection($collection);
parent::_prepareCollection();$this->getCollection()->addWebsiteNamesToResult();return$this;}

Now let’s add this to a new column:

/*You will find some more code inside this method, but for readability purposes, I'll just say you need to add code you find here at beginning of this method...*/protectedfunction _prepareColumns(){$this->addColumn('Short description',array('header'=> Mage::helper('catalog')->__('Short description'),'index'=>'short_description','renderer'=>'Mage_Adminhtml_Block_Catalog_Product_Renderer_Red',// THIS IS WHAT THIS POST IS ALL ABOUT));}

Make directory called Renderer inside directory where your Grid.php is located and make file Red.php

Now you should have one additional column at product grid containing short description writen in red.

If you feel like you would need a team of experts to help you out with this, or any other Magento development related subject, we would be happy to assist you. Our Magento Technical Audit is a great place to start improving your store.

24 comments

I have a question, When a created a grid in admin but the info is not from the database, it’s from a web service, the default option like sort, filter and search doesn´t work. Do yo know how to make a “Custom grid” but with the correctly funcionallity??. Thanks in advance

Hi, I added a new column to my product grid (this column is not an product attribute, so i made a join on the product collection), a selectable dropdown.Everithing is ok but my problem is that i can’t manage to send the selected value trough post to the other pages, so when i changed and go to a different page and return, the value is changed back to it’s default. How should i send this value to other pages like when clicking on the checkbox?

Hi, thanks for the tutorial, i was wondering if anyone knows how to show if a product has an image?
the code below shows 0 for items with an image and nothing if they don’t have an image which is fine i guess.. but i’d like to make it display yes/no can anyone help?!

And then create your custom renderer (mine Image.php) into the app/code/local/Adminhtml/Block/Widget/Grid/Column/Renderer like you explained. (you should maybe add a function to get the full URL of your image if it comes from the products for example)
You can even create your custom filter app/code/local/Adminhtml/Block/Widget/Grid/Column/Filter in my case Image.php

Your email address will not be published. Required fields are marked *

Comment *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.