Add Custom Grid in Magento® Admin Form Tab

While creating admin forms in Magento, you may want to show the custom grid in your forms tab. In the custom grid you may want to show Magento products data or data from some custom module table. In this article we will see how to add custom grid in Magento admin form tab.

Here is what we will achieve at the end of tutorial:

We assume that you have already created a form in admin panel.

1. Add new tab in app\code\local\Company\Mymodule\Block\Adminhtml\Mymodule\Edit\Tabs.php

<?php
protected function _beforeToHtml()
{
    [...]
    $this->addTab('items_section', array(
        'label'     => Mage::helper('mymodule')->__('My Items'),
        'title'     => Mage::helper('mymodule')->__('My Items'),
        'url'       => $this->getUrl('*/*/getItems', array('_current' => true)),    // Url of action which loads the grid
        'class'     => 'ajax',  // load the frid via ajax
    ));
}

2. Add new Grid.php class in app\code\local\Company\Mymodule\Block\Adminhtml\Mymodule\Edit\Tab folder

<?php
class Company_Mymodule_Block_Adminhtml_Mymodule_Edit_Tab_Grid extends Mage_Adminhtml_Block_Widget_Grid
{
    public function __construct()
    {
        parent::__construct();
        $this->setId('customItemsGrid');
        $this->setUseAjax(true);
        $this->setDefaultDir('DESC');
        $this->setSaveParametersInSession(true);
        $this->setFilterVisibility(false);  // Do not show filters for this grid
    }

    /**
     * Prepare grid collection object
     *
     * @return $this|Mage_Adminhtml_Block_Widget_Grid
     */
    protected function _prepareCollection()
    {
        // Load your custom collection
        $collection = Mage::getModel("mymodule/mymodule")->getCollection();
        $this->setCollection($collection);
        return parent::_prepareCollection();
    }

    /**
     * Prepare the grid columns
     *
     * @return mixed $this|void
     *
     */
    protected function _prepareColumns()
    {
        $this->addColumn("item_id", array(
            "header" => Mage::helper('mymodule')->__("ID"),
            "align" =>"right",
            "width" => "50px",
            "type" => "number",
            "index" => "item_id",
            'sortable' => false,
            'filter' => false,
        ));

        $this->addColumn("name", array(
            "header" => Mage::helper('mymodule')->__("Name"),
            "index" => "name",
            'sortable' => false,
            'filter' => false,
        ));

        [...]

        return parent::_prepareColumns();
    }

}

3. Create the new action in admin controller. This controller will load the custom grid via Ajax

<?php
[...]
public function getItemsAction() {
    $this->loadLayout();
    // the block name must exist in the amyout file in step 4
    $this->getLayout()->getBlock('mymodule.edit.tab.items');
    $this->renderLayout();
}

4. Create handle for grid url in admin layout file.

<adminhtml_mymodule_getitems>
    <block type="core/text_list" name="root" output="toHtml">
        <block type="mymodule/adminhtml_mymodule_edit_tab_grid" name="mymodule.edit.tab.items"/>
    </block>
</adminhtml_mymodule_getitems>