How to create a custom grid from scratch

By: Vedran Sola, Last updated: Oct 10, 2019 | Published: Mar 03, 2013

We received a request from a client where they wanted to implement an expanded order grid while still keeping the default Magento’s one. For this example we’ll create a new module named Inchoo Orders.

Step 1.

Create new module in etc/modules called Inchoo_Orders.xml

<?xml version="1.0"?>
 
<config>
    <modules>
        <Inchoo_Orders>
            <active>true</active>
            <codePool>community</codePool>
        </Inchoo_Orders>
    </modules>
</config>

Step 2.

Next thing we’ll do is create folder Inchoo/Orders inside app/code/community and inside we’ll make few folders: Block, controllers, etc, Helper.

Step 3.

Create config.xml inside etc folder.

<?xml version="1.0"?>
 
<config>
    <modules>
        <Inchoo_Orders>
            <version>0.0.0.1</version>
        </Inchoo_Orders>
    </modules>
 
    <global>
        <models>
            <inchoo_orders>
                <class>Inchoo_Orders_Model</class>
                <resourceModel>inchoo_orders_resource</resourceModel>
            </inchoo_orders>
        </models>
 
        <resources>
            <inchoo_orders_setup>
                <setup>
                    <module>Inchoo_Orders</module>
                </setup>
            </inchoo_orders_setup>
        </resources>
 
        <blocks>
            <inchoo_orders>
                <class>Inchoo_Orders_Block</class>
            </inchoo_orders>
        </blocks>
 
        <helpers>
            <inchoo_orders>
                <class>Inchoo_Orders_Helper</class>
            </inchoo_orders>
        </helpers>
    </global>
 
    <admin>
        <routers>
            <adminhtml>
                <args>
                    <modules>
                        <inchoo_orders before="Mage_Adminhtml">Inchoo_Orders_Adminhtml</inchoo_orders>
                    </modules>
                </args>
            </adminhtml>
        </routers>
    </admin>
</config>

Step 4

Create adminhtml.xml file inside etc folder which will add a link to our orders page in magento admin panel.

<?xml version="1.0"?>
 
<config>
    <menu>
        <sales>
            <children>
                <inchoo_orders translate="title" module="inchoo_orders">
                    <sort_order>10</sort_order>
                    <title>Orders - Inchoo</title>
                    <action>adminhtml/order/</action>
                </inchoo_orders>
            </children>
        </sales>
    </menu>
</config>

Step 5

Create blank helper class.

<?php
 
class Inchoo_Orders_Helper_Data extends Mage_Core_Helper_Abstract
{
 
}

Step 6

Next step is to create controller for our grid.

<?php
 
class Inchoo_Orders_Adminhtml_OrderController extends Mage_Adminhtml_Controller_Action
{
    public function indexAction()
    {
        $this->_title($this->__('Sales'))->_title($this->__('Orders Inchoo'));
        $this->loadLayout();
        $this->_setActiveMenu('sales/sales');
        $this->_addContent($this->getLayout()->createBlock('inchoo_orders/adminhtml_sales_order'));
        $this->renderLayout();
    }
 
    public function gridAction()
    {
        $this->loadLayout();
        $this->getResponse()->setBody(
            $this->getLayout()->createBlock('inchoo_orders/adminhtml_sales_order_grid')->toHtml()
        );
    }
 
    public function exportInchooCsvAction()
    {
        $fileName = 'orders_inchoo.csv';
        $grid = $this->getLayout()->createBlock('inchoo_orders/adminhtml_sales_order_grid');
        $this->_prepareDownloadResponse($fileName, $grid->getCsvFile());
    }
 
    public function exportInchooExcelAction()
    {
        $fileName = 'orders_inchoo.xml';
        $grid = $this->getLayout()->createBlock('inchoo_orders/adminhtml_sales_order_grid');
        $this->_prepareDownloadResponse($fileName, $grid->getExcelFile($fileName));
    }
}

Step 7

Next thing we do is create grid container in Block/Adminhtml/Sales/Order.php

<?php
 
class Inchoo_Orders_Block_Adminhtml_Sales_Order extends Mage_Adminhtml_Block_Widget_Grid_Container
{
    public function __construct()
    {
        $this->_blockGroup = 'inchoo_orders';
        $this->_controller = 'adminhtml_sales_order';
        $this->_headerText = Mage::helper('inchoo_orders')->__('Orders - Inchoo');
 
        parent::__construct();
        $this->_removeButton('add');
    }
}

Step 8

Last step is making grid class in Block/Adminhtml/Sales/Order/Grid.php

<?php
 
class Inchoo_Orders_Block_Adminhtml_Sales_Order_Grid extends Mage_Adminhtml_Block_Widget_Grid
{
    public function __construct()
    {
        parent::__construct();
        $this->setId('inchoo_order_grid');
        $this->setDefaultSort('increment_id');
        $this->setDefaultDir('DESC');
        $this->setSaveParametersInSession(true);
        $this->setUseAjax(true);
    }
 
    protected function _prepareCollection()
    {
        $collection = Mage::getResourceModel('sales/order_collection')
            ->join(array('a' => 'sales/order_address'), 'main_table.entity_id = a.parent_id AND a.address_type != \'billing\'', array(
                'city'       => 'city',
                'country_id' => 'country_id'
            ))
            ->join(array('c' => 'customer/customer_group'), 'main_table.customer_group_id = c.customer_group_id', array(
                'customer_group_code' => 'customer_group_code'
            ))
            ->addExpressionFieldToSelect(
                'fullname',
                'CONCAT({{customer_firstname}}, \' \', {{customer_lastname}})',
                array('customer_firstname' => 'main_table.customer_firstname', 'customer_lastname' => 'main_table.customer_lastname'))
            ->addExpressionFieldToSelect(
                'products',
                '(SELECT GROUP_CONCAT(\' \', x.name)
                    FROM sales_flat_order_item x
                    WHERE {{entity_id}} = x.order_id
                        AND x.product_type != \'configurable\')',
                array('entity_id' => 'main_table.entity_id')
            )
        ;
 
        $this->setCollection($collection);
        parent::_prepareCollection();
        return $this;
    }
 
    protected function _prepareColumns()
    {
        $helper = Mage::helper('inchoo_orders');
        $currency = (string) Mage::getStoreConfig(Mage_Directory_Model_Currency::XML_PATH_CURRENCY_BASE);
 
        $this->addColumn('increment_id', array(
            'header' => $helper->__('Order #'),
            'index'  => 'increment_id'
        ));
 
        $this->addColumn('purchased_on', array(
            'header' => $helper->__('Purchased On'),
            'type'   => 'datetime',
            'index'  => 'created_at'
        ));
 
        $this->addColumn('products', array(
            'header'       => $helper->__('Products Purchased'),
            'index'        => 'products',
            'filter_index' => '(SELECT GROUP_CONCAT(\' \', x.name) FROM sales_flat_order_item x WHERE main_table.entity_id = x.order_id AND x.product_type != \'configurable\')'
        ));
 
        $this->addColumn('fullname', array(
            'header'       => $helper->__('Name'),
            'index'        => 'fullname',
            'filter_index' => 'CONCAT(customer_firstname, \' \', customer_lastname)'
        ));
 
        $this->addColumn('city', array(
            'header' => $helper->__('City'),
            'index'  => 'city'
        ));
 
        $this->addColumn('country', array(
            'header'   => $helper->__('Country'),
            'index'    => 'country_id',
            'renderer' => 'adminhtml/widget_grid_column_renderer_country'
        ));
 
        $this->addColumn('customer_group', array(
            'header' => $helper->__('Customer Group'),
            'index'  => 'customer_group_code'
        ));
 
        $this->addColumn('grand_total', array(
            'header'        => $helper->__('Grand Total'),
            'index'         => 'grand_total',
            'type'          => 'currency',
            'currency_code' => $currency
        ));
 
        $this->addColumn('shipping_method', array(
            'header' => $helper->__('Shipping Method'),
            'index'  => 'shipping_description'
        ));
 
        $this->addColumn('order_status', array(
            'header'  => $helper->__('Status'),
            'index'   => 'status',
            'type'    => 'options',
            'options' => Mage::getSingleton('sales/order_config')->getStatuses(),
        ));
 
        $this->addExportType('*/*/exportInchooCsv', $helper->__('CSV'));
        $this->addExportType('*/*/exportInchooExcel', $helper->__('Excel XML'));
 
        return parent::_prepareColumns();
    }
 
    public function getGridUrl()
    {
        return $this->getUrl('*/*/grid', array('_current'=>true));
    }
}

Our new custom orders page can be accessed by going to Sales -> Orders – Inchoo in admin panel.

End result should be something like this:

However, if you’re having trouble with Magento development, we would be happy to help. Our team of experts can check out your site and get you a detailed report based on a personalized technical audit. Feel free to get in touch!

Related Inchoo Services

Published in:

92 comments

dinesh says:

Jun 08, 2015 at 8:30

I run this module …. in first attempt. without any error.

Reply
Vapes says:

May 28, 2015 at 12:11

Not working as all,
not even visible in menu.and many folks having same issue i can read that

Reply
Huan Ngoc Hoang says:

Apr 22, 2015 at 7:40

help me
Latest Message: Second Reminder: Download and install Magento critical security patches now. Read details

Reply
James says:

Apr 02, 2015 at 13:04

I can see blank page with no content.
I have puth my controller on proper place, also try to put it in local folder with respective path.
still not getting any output .
Need your suggestions.

Reply
Tatiana says:

Feb 24, 2015 at 12:46

Hi guys! Thanks for you post. It helped me to understand grids building.
Here is precondition:
I had some rules form in admin, that was available by */*/edit url. Purpose was to integrate tabs and grid from a bit another location with own controller. This form moved to General tab, in the second one I integrated form with grid (like in quote_promo manage coupon codes in native Magento). As a result I got smth like that.
Faced with the next problem:
When I try to search smth in grid, f.e. coupon code by typing query and pressing Enter button, I see in Firebug console that query processing to (ajax) grid url is terminated and then redirect happens to Save action (form action), and since there is no rule_id in POST data, it redirects to rule index page with grid.

Do you have any idea why is that happen?
Seems like there is some bind to input that ‘trigger’ save action method.

Thanks for your reply!
Waiting for it so much!

Reply
Muhammad Ahsan Horani says:

Feb 04, 2015 at 9:43

Wonderful article works great on magento 1.9.1
For all those who are getting errors, make these changes only :
add your controller to app\code\local\Inchoo\Orders\controllers\Adminhtml\OrderController.php

And tell me if anyone interested to view order on click. I have managed to sort it out. Enjoy magento !

Reply
1. sunil says:
  
  Mar 05, 2015 at 10:31
  
  What should be the name of files of step 5 and 6,
John says:

Feb 02, 2015 at 15:46

Hi Vedran, Thank you for the nice tutorial and I installed it on my magento. Meanwhile, I would like to filter the results by Store wise(I have multiple stores). Could you please let me know, how can we place a store filter drop down in the top of the order lising.

Reply
Martin says:

Jan 20, 2015 at 12:22

Vedran, thank you very much for these great tutorial. I have one problem with this. If you click multiple times on the upper header to sort the fields an error message appears.
The error is:
Item (Mage_Sales_Model_Order) with the same id “1242” already exists.

Do you have any idea why this could happen. BTW: I haven’t changed anything to your sourcecode for this test.
Best regards
Martin

Reply
venkatesh says:

Nov 25, 2014 at 21:27

Hi,
I follow all instruction at last it showing page not found in localhost wamp which I newly installed, please help me

Reply
KK says:

Oct 21, 2014 at 7:00

Is there any way to use the same grid in the frontend to display order details?

Reply
wazid hussain says:

Sep 15, 2014 at 8:28

Really awesome … This is the exact code which i am searching. Thanks a lot.

Reply
Vijay Kumar says:

Sep 08, 2014 at 13:09

Fatal error: Call to a member function setSaveParametersInSession() on a non-object in /opt/lampp/htdocs/layoutmagento/app/code/core/Mage/Adminhtml/Block/Widget/Grid/Container.php on line 66

I have error in the same code you have writte above. Please help me

Reply
Vijay Kumar says:

Sep 08, 2014 at 13:08

Hi

i have error in the same you have written above

Fatal error: Call to a member function setSaveParametersInSession() on a non-object in /opt/lampp/htdocs/layoutmagento/app/code/core/Mage/Adminhtml/Block/Widget/Grid/Container.php on line 66

Please help.

Reply
1. Abdul Basit says:
  
  Jun 28, 2015 at 20:53
  
  how did you sort this out ,,, can you help me ,, i have same error , plz help
Vijay says:

Sep 08, 2014 at 13:06

Fatal error: Call to a member function setSaveParametersInSession() on a non-object in /opt/lampp/htdocs/layoutmagento/app/code/core/Mage/Adminhtml/Block/Widget/Grid/Container.php on line 66

Reply
Tony says:

Jun 22, 2014 at 15:33
I have the blank screen error. I narroved it to the line
```
$this->_addContent($this->getLayout()->createBlock('inchoo_orders/adminhtml_sales_order'));
```
. If I comment out the line, I have at least Magento Header and footer and blank white between. So there’s something with the fuction or the Grid.php. Version is 1.9.0.1. What have changed?
Reply
Rhythm says:

Jun 03, 2014 at 16:42

Hi Vedran

I have used this and it is working fine.
I want to make some checks in query by using my custom table. Could you please guide me how can i implement this in grid.php ?

Thanks in advance

Reply
1. sibin says:
  
  Dec 05, 2014 at 12:15
  
  Hai I am also seeking the requirement I need to display the orders from custom created tables. Did u got the idea Please share if any code available to implement. Thanks in advance
rohit says:

May 28, 2014 at 8:45

and can you please tell me how can i add import csv functionality in this

thanks

Reply
rohit says:

May 28, 2014 at 8:01

HI first of all thanks for such a nice post.It works perfect.

But i have a some confusion in the config.xml file.

in that there is a model

Inchoo_Orders_Model
inchoo_orders_resource

we have defined but we dont have a model class for this so why dont it has raise a errot .
Please tell me i just learning magento extensions

thanks

Reply
Azhar says:

May 21, 2014 at 14:11

thanks mark its realy helpful to solve me that error

Reply
1. Ravi says:
  
  Jan 27, 2015 at 14:23
  
  Hi Azhar,
  
  its not working with me and i got 404 error. Can you please help me out.
  
  Thanks
kevando says:

Apr 25, 2014 at 4:12

This helped so much!!! For those having issues with the 404 page, you most likely do not have the OrderController.php in the right folder. It should be controllers/Adminhtml/OrderController.php

Reply
James says:

Apr 21, 2014 at 22:40

Perfect – Was looking for something like this for ages. I can confirm this works perfectly on the new version of 1.8.1 as well.

Reply
Nikunj says:

Mar 14, 2014 at 12:16

i try to use this code but not working and give black screen.

please Vedran Sola why this not work??

thanks in advanced

Reply
Mike says:

Feb 21, 2014 at 18:04

For those getting a 404 Not Found Error when trying to access the grid, I found the issue was where I put my OrderController.php file. It needs to be Inchoo/Orders/controllers/Adminhtml/OrderController.php

Originally I had put it in Inchoo/Orders/controllers/OrderController.php and this doesn’t work.

Reply
suchitra says:

Jan 10, 2014 at 6:13

Hi,
This is very good extension. In our custom grid orders are showing but it better link provide to the orders to the order detailed page. Can you please guide the hyperlink to redirect the order page when we click on that order.

Reply
Gaurav says:

Dec 13, 2013 at 7:55

I am gettign this error whenever I tried to open this module from admin site
Parse error: syntax error, unexpected ‘Â Â Â Â public’ (T_STRING), expecting function (T_FUNCTION) in C:\xampp\htdocs\magento\app\code\community\Inchoo\Orders\controllers\Adminhtml\OrderController.php on line 9

Can anyone help me for that

Reply
noman says:

Nov 25, 2013 at 8:14

I make my own module using your concept but grid content are not shown… help me out to fix this problem

Reply
Carmen says:

Nov 14, 2013 at 0:18

Thank you very much for your post!
Anyone know how to generate in a cronjob the csv with this content?
is for integration with a sales soft
thankyou in advance

Reply
benblee says:

Nov 13, 2013 at 17:43
Sam at RocketTheme helped me out with the database prefix issue.

Change out the table name:
```
sales_flat_order_item
```
With this:
```
'.Mage::getSingleton('core/resource')->getTableName('sales_flat_order_item').'
```
That will retrieve any prefix for your current install.
Reply
benblee says:

Nov 12, 2013 at 21:19

Looks like this adds the row url, which I just pulled from the core Grid.php file:

public function getRowUrl($row)
{
if (Mage::getSingleton(‘admin/session’)->isAllowed(‘sales/order/actions/view’)) {
return $this->getUrl(‘*/sales_order/view’, array(‘order_id’ => $row->getId()));
}
return false;
}

That added just above the grid url code near the end.

Reply
benblee says:

Nov 12, 2013 at 20:57

Got things working and this is a great walk through.

Two things I noticed are that a database table prefix needs to be defined in the Grid.php file code and that the row does not link to the order details.

Is it possible to get the row linked to the order details?

Reply
sandeep says:

Oct 28, 2013 at 18:59

how can i do same for managed products

Reply
Rushit says:

Oct 25, 2013 at 14:10

Y i need to just make a file in helper when there is no data in it ? I am just declaring the file & not writing any content in it.

Reply
Sebastien Dewandre says:

Aug 21, 2013 at 22:46

Thanks so much!

I’ve been trying to add the Customer group to the grid for days now…

Regards,
Seb

Reply
Neet says:

Aug 08, 2013 at 7:59

Hi,
I can see the Order – Inchoo under the Sales tab in the admin. However when I click on it, it gives me a 404 error.
Below is the link it is pointing to:
http://127.0.1.1/bakery/index.php/order/adminhtml_order/index/key/463b6f9049cf6c0eca7f56eba7a9b7ad/

Is this link correct? I have verified the file structure and it is same as mentioned above.
I am guessing something is wrong with my etc/adminhtml.xml.

10
Orders – Bakery
order/adminhtml_order

Please advice.

Thanks,
Neet

Reply
Neet says:

Aug 05, 2013 at 4:57

Hi,
I am running magento 1.7, and followed the steps above to create a new grid. However when I click on it from the admin page, I get a 404, page not found error. I don’t see the new grid details :((.
Please help.

Thanks,
Neet

Reply
mukesh says:

Jun 13, 2013 at 10:18

I got same errors so I just changed few lines.

Wrong :
class Inchoo_Orders_Adminhtml_OrderController extends Mage_Adminhtml_Controller_Action
{

Right :
include(‘Mage/Adminhtml/controllers/Sales/OrderController.php’);
class Inchoo_Orders_Adminhtml_OrdersController extends Mage_Adminhtml_Sales_OrderController
{

and

in adminhtml.xml

10
Orders – Inchoo
order/adminhtml_orders

Reply
ranga says:

May 24, 2013 at 7:20

i did it but page load with empty screen there is no data or nothing no errors

Reply
Vedran Sola says:

Mar 26, 2013 at 8:28

Take a look at screenshot, perhaps you’re missing something: http://i.imgur.com/odIXoUz.png?1

Reply
Zvonimir Buric says:

Mar 25, 2013 at 13:18

@Kaysellers
Hi,
did you try to clear the cache?

Reply
Mark says:

Mar 22, 2013 at 13:02

Hi,

I am getting the same error as Hissam and Kaysellers.

What version does this work on?

Reply
Web Design Malaysia says:

Mar 21, 2013 at 3:15

i just implemented this on our of our projects and i must say it worked flawlessly.

Reply
Kaysellers says:

Mar 20, 2013 at 16:57

Hello ,

I am facing the same problem as of Hissam Roohi.

What could be the issue?? I think that might be the issue due to some wrong configuration. Can you please let me know what could be the issue

Reply
Hissam Roohi says:

Mar 16, 2013 at 7:51

When i click the Orders- Inchoo sub menu , i am getting the error ‘The page you requested was not found, and we have a fine guess why.’

After clicking it is redirecting the below url :

“https://inchoo.net/magento17/index.php/admin/order/index/key/1bce285af813fee9aa5d18881474c09e/”

@Vedran Sola -Can you please help me out

Reply
MageCoder says:

Mar 14, 2013 at 15:33

Nice!

Reply
Vedran Sola says:

Mar 13, 2013 at 8:14

Data.php is helper and controller class should go to controllers/Adminhtml/Order.php

Reply
Alex says:

Mar 13, 2013 at 0:48

Hey Vedran,
This looks very interesting. I got lost at steps 5 and 6. What files should contain the blank helper class and the controller for our grid?
Thanks,

Reply
Vedran Sola says:

Mar 08, 2013 at 0:00

@Kieran

gridAction is being called by getGridUrl method in Grid.php and its purpose is to enable grid filtering using ajax.

Reply
Kieran says:

Mar 07, 2013 at 19:27

Hi,

I have followed your guide but when I click on the link it simple gives me a blank screen not showing the grid. One thing i was wondering, where does it call the gridAction from the controller?

Reply
filippo says:

Mar 04, 2013 at 15:18

Very interesting. For my experience a current problem is to create a master/details grid. Have you got a road to?
regards
filippo.

Reply
Ivan Galambos says:

Mar 04, 2013 at 10:25

Congrats Vedran on your first post!

Reply

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Adding gallery tab to a CMS page

How I learned to stop worrying and love 3rd party modules for Magento

Filter order grid by multiple ID’s

92 comments

Leave a Reply Cancel reply