Magento – Best Practice: How to add a column to a backend grid

collection;event-observergridlayoutoverrides

Usually we need to add to the Order Grid some column, so let take this as example.

There are 3 ways to do that:

Rewrite the grid block in our custom module
Use an observer on the event core_block_abstract_prepare_layout_before
Use a Layout update

(let don't consider the alteration of the collection to make things more easy)

First method is the most powerful but It leads to conflict in the scenarios.
Second method is in IMHO resource consuming as we are adding an extra code step for every block we are going to render
Third step is a layout update so should be the most advisable … but are we sure it will work always ?

Other consideration are welcome

References:
Method 1:
– http://inchoo.net/ecommerce/magento/programming-magento/adding-customer-group-column-to-sales-grid-in-magento/
Method 2:
– http://www.atwix.com/magento/add-column-to-customers-grid-alternative-way/
Method 3:
– http://www.atwix.com/magento/column-to-orders-grid/

Best Answer

Best practice to add a column to the backend grid is of course implementation of event-observer method. But question arises which event is used for the purpose? And one of the Answer is core_block_abstract_to_html_before

Suppose say you have implemented observer model for above event with method coreBlockAbstractToHtmlBefore.

CODE:

public function coreBlockAbstractToHtmlBefore(Varien_Event_Observer $observer)
{

    /** @var $block Mage_Core_Block_Abstract */
    $block = $observer->getEvent()->getBlock();
    if ($block->getId() == 'customerGrid')
    {
        // Add the attribute as a column to the grid
        $block->addColumnAfter(
            'custom_grid_element',
            array(
                'header' => $helper->__('Custom Grid Element'),
                'align' => 'center',
                'width' => '80px',
                'type' => 'text',
                'options' => array(
                ),
                'default' => '',
                'index' => 'custom_grid_element',
                'renderer'  => ''
            ),
            'customer_since'
        );

        // Set the new columns order.. otherwise our column would be the last one
        $block->sortColumnsByOrder();
    }
}

Above is just an example for adding custom grid element to the Customer grid. You can deploy the very same technique for Sales grid as well.

Related Solutions

Magento 1.8 – Add Template Block into Another Template

So your template file holds <html /> <head /> <body /> tags in it. It will be a bad design, because magento loads all these things through page.xml layout file. If you want to see those codes.

For simplicity, I assumes you have a 2 column -left layout for your page. Then the template that holds definitionof this layout has a design like this

#File:app/design/frontend/base/default/template/page/1column.phtml



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <div class="main-container col2-left-layout">
            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
                <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
            </div>
        </div>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

As you can see all those tags that your are added through your block is already loading by Magento. "So don't make Magento angry by placing that code in your template file. If magento becomes angry, she will respond badly :)".

More info : Your block is added to the above code by this section.

 <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>

This will add all blocks that comes under left block that are specified through layout files. So in order to be a part of it,(or to test) you just need to use this design code in your template files.

<p>$this->__('Baby, I am here')</p>

Normally I am using this for testing purposes :)

Conclusion

Without that, I can't see any problem with your code. There is only one chance remain. You may included these template files in wrong position. That would be the most probable reason that resist to show the output

signing off :)

Magento – add column to sales/orders grid

This is a duplicate of the question Add Column to a grid (observer) - Column ‘store_id’ in where clause is ambiguous issue, here I explained how to add a column to the sales/order grid the right way (without file copy or a rewrite).

The sales/order grid uses the table sales_flat_order_grid to display its information, this is done to list all orders without adding joins and speeding-up the loading. In order to add a column to the grid you would need to add a field to this table and update the information in that field when an order is created/updated. Below the steps needed to add this to the grid:

I called the extension Example_SalesGrid, but you can change it to your own needs.

Let's start by creating the module init xml in /app/etc/modules/Example_SalesGrid.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!--
 Module bootstrap file
-->
<config>
    <modules>
        <Example_SalesGrid>
            <active>true</active>
            <codePool>community</codePool>
            <depends>
                <Mage_Sales />
            </depends>
        </Example_SalesGrid>
    </modules>
</config>

Next we create our module config xml in /app/code/community/Example/SalesGrid/etc/config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Example_SalesGrid>
            <version>0.1.0</version> <!-- define version for sql upgrade -->
        </Example_SalesGrid>
    </modules>
    <global>
        <models>
            <example_salesgrid>
                <class>Example_SalesGrid_Model</class>
            </example_salesgrid>
        </models>
        <blocks>
            <example_salesgrid>
                <class>Example_SalesGrid_Block</class>
            </example_salesgrid>
        </blocks>
        <events>
            <!-- Add observer configuration -->
            <sales_order_resource_init_virtual_grid_columns>
                <observers>
                    <example_salesgrid>
                        <model>example_salesgrid/observer</model>
                        <method>addColumnToResource</method>
                    </example_salesgrid>
                </observers>
            </sales_order_resource_init_virtual_grid_columns>
        </events>
        <resources>
            <!-- initialize sql upgrade setup -->
            <example_salesgrid_setup>
                <setup>
                    <module>Example_SalesGrid</module>
                    <class>Mage_Sales_Model_Mysql4_Setup</class>
                </setup>
            </example_salesgrid_setup>
        </resources>
    </global>
    <adminhtml>
        <layout>
            <!-- layout upgrade configuration -->
            <updates>
                <example_salesgrid>
                    <file>example/salesgrid.xml</file>
                </example_salesgrid>
            </updates>
        </layout>
    </adminhtml>
</config>

Now we create the sql upgrade script in /app/code/community/Example/SalesGrid/sql/example_salesgrid_setup/install-0.1.0.php:

<?php
/**
 * Setup scripts, add new column and fulfills
 * its values to existing rows
 *
 */
$this->startSetup();
// Add column to grid table

$this->getConnection()->addColumn(
    $this->getTable('sales/order_grid'),
    'customer_city',
    'varchar(255) DEFAULT NULL'
);

// Add key to table for this field,
// it will improve the speed of searching & sorting by the field
$this->getConnection()->addKey(
    $this->getTable('sales/order_grid'),
    'customer_city',
    'customer_city'
);

// Now you need to fullfill existing rows with data from address table

$select = $this->getConnection()->select();
$select->join(
    array('address'=>$this->getTable('sales/order_address')),
    $this->getConnection()->quoteInto(
        'address.parent_id = order_grid.entity_id AND address.address_type = ?',
        Mage_Sales_Model_Quote_Address::TYPE_BILLING
    ),
    array('customer_city' => 'city')
);
$this->getConnection()->query(
    $select->crossUpdateFromSelect(
        array('order_grid' => $this->getTable('sales/order_grid'))
    )
);

$this->endSetup();

Next we create the layout update file in /app/design/adminhtml/default/default/layout/example/salesgrid.xml:

<?xml version="1.0"?>
<layout>
    <!-- main layout definition that adds the column -->
    <add_order_grid_column_handle>
        <reference name="sales_order.grid">
            <action method="addColumnAfter">
                <columnId>customer_city</columnId>
                <arguments module="sales" translate="header">
                    <header>Customer City</header>
                    <index>customer_city</index>
                    <type>text</type>
                    <width>200</width>
                </arguments>
                <after>shipping_name</after>
            </action>
        </reference>
    </add_order_grid_column_handle>
    <!-- order grid action -->
    <adminhtml_sales_order_grid>
        <!-- apply the layout handle defined above -->
        <update handle="add_order_grid_column_handle" />
    </adminhtml_sales_order_grid>
    <!-- order grid view action -->
    <adminhtml_sales_order_index>
        <!-- apply the layout handle defined above -->
        <update handle="add_order_grid_column_handle" />
    </adminhtml_sales_order_index>
</layout>

The last file needed is needed to update the data from a table other than sales/order (sales_flat_order). All fields in sales/order_grid matching the column name from sales/order is automatically updated in the sales/order_grid table.

/app/code/community/Example/SalesGrid/Model/Observer.php:

<?php
/**
 * Event observer model
 *
 *
 */
class Example_SalesGrid_Model_Observer {

    public function addColumnToResource(Varien_Event_Observer $observer) {
        // Only needed if you use a table other than sales/order (sales_flat_order)

        $resource = $observer->getEvent()->getResource();
        $resource->addVirtualGridColumn(
            'customer_city',
            'sales/order_address',
            array('billing_address_id' => 'entity_id'),
            'city'
        );
    }
}

This code is based on the example from ~~http://www.ecomdev.org/2010/07/27/adding-order-attribute-to-orders-grid-in-magento-1-4-1.html~~

Hope the example above solves your problem.

Best Answer

Related Solutions

Magento 1.8 – Add Template Block into Another Template

Magento – add column to sales/orders grid

Related Topic