adminhtml – How to Add Block Above Adminhtml Grid

adminhtmlblocksgrid

I've seen quite a lot of modules where they'll display a grid, but above that will be a block (sometimes an encouragement to upgrade, sometimes some additional information for the user).

I would like to add an Adminhtml form there.

The form is complete, and the grid is complete, but I can't seem to find any sort of hook to include the form in the grid.

I've already tried overriding the getMainButtonsHtml() method, but that seems to put the block underneath the filters. Ideally it needs to be above the filters. Is there a similar function for the HTML above the filters?

My other option would be to create an additional block that gets initialised in the tab, this one would include the form and the grid; so instead of adding the form to the grid, I'd add both the form and the grid to a container element.

Is there another (cleaner) way to do this?

Best Answer

I was able to override the block's _toHtml method and include the block:

/**
 * Override this method in descendants to produce html
 *
 * @return string
 */
protected function _toHtml()
{
    $html = $this->getLayout()->createBlock('mymoudule/adminhtml_myblock')->toHtml() . '<br />';
    $html .= parent::_toHtml();

    return $html;
}

Related Solutions

Magento – Making rows clickable in Adminhtml Cms Block Grid

To add an 'edit' link to the CMS Static Blocks grid, all you'd have to do is extend that block with your own module and rewrite _prepareColumns. But, I've already done all of this for you while testing :)

See the code below:

app/code/local/YourCompany/YourModule/Block/Cms/Block/Grid.php

<?php

class YourCompany_YourModule_Block_Cms_Block_Grid extends Mage_Adminhtml_Block_Cms_Block_Grid
{
    protected function _prepareColumns()
    {
        parent::_prepareColumns();
        $this->addColumn('action',
            array(
                'header'    => Mage::helper('cms')->__('Action'),
                'width'     => '50px',
                'type'      => 'action',
                'getter'     => 'getId',
                'actions'   => array(
                    array(
                        'caption' => Mage::helper('cms')->__('View'),
                        'url'     => array('base'=>'*/*/edit'),
                        'field'   => 'block_id'
                        )
                    ),
                'filter'    => false,
                'sortable'  => false
            )
        );

    }
}

app/code/local/YourCompany/YourModule/etc/config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <global>
        <blocks>
            <adminhtml>
                <rewrite>
                    <cms_block_grid>YourCompany_YourModule_Block_Cms_Block_Grid</cms_block_grid>
                </rewrite>
            </adminhtml>
        </blocks>           
    </global>
</config>

app/etc/modules/YourCompany_YourModule.xml

<?xml version="1.0"?>
<config>
    <modules>
        <YourCompany_YourModule>
            <active>true</active>
            <codePool>local</codePool>
        </YourCompany_YourModule>
    </modules>
</config>

Adds a 'View' link, as advertised:

enter image description here

Magento – Best way to add a dynamic grid as input in custom extension Adminhtml

It took me way to long to realize that Tier prices looks the way I want. So after looking into how Magento does it with Tier pricing I ended up doing the following. Sorry in advance for the huge blocks of code but I thought it might be interesting for future reference.

In my form class Redkiwi_Rkstorelocator_Block_Adminhtml_Rkstorelocator_Edit_Tab_General

class Redkiwi_Rkstorelocator_Block_Adminhtml_Rkstorelocator_Edit_Tab_General extends Mage_Adminhtml_Block_Widget_Form
{
    protected function _prepareForm()
    {
        $form = new Varien_Data_Form();
        $this->setForm($form);
        $fieldset = $form->addFieldset('rkstorelocator_form', array('legend'=>Mage::helper('rkstorelocator')->__('Store information')));

        [...]

        $officehours_field = $fieldset->addField('office_hours', 'text', array(
            'name'      => 'office_hours',
            'label'     => Mage::helper('rkstorelocator')->__('Office hours'),
            'required'  => false,
        ));

        $office_hours = $form->getElement('office_hours');

        $office_hours->setRenderer(
            $this->getLayout()->createBlock('rkstorelocator/adminhtml_rkstorelocator_edit_renderer_officehours')
        );


        [...]
    }
}

Now for the Office hours block class Redkiwi_Rkstorelocator_Block_Adminhtml_Rkstorelocator_Edit_Renderer_Officehours.

class Redkiwi_Rkstorelocator_Block_Adminhtml_Rkstorelocator_Edit_Renderer_Officehours
 extends Mage_Adminhtml_Block_Widget
 implements Varien_Data_Form_Element_Renderer_Interface
{

    /**
     * Initialize block
     */
    public function __construct()
    {
        $this->setTemplate('rkstorelocator/officehours.phtml');
    }

    /**
     * Render HTML
     *
     * @param Varien_Data_Form_Element_Abstract $element
     * @return string
     */
    public function render(Varien_Data_Form_Element_Abstract $element)
    {
        $this->setElement($element);
        return $this->toHtml();
    }

}

And the template .phtml file adminhtml/default/default/template/rkstorelocator/officehours.phtml

<?php 
$_htmlId      = $this->getElement()->getHtmlId();
$_htmlClass   = $this->getElement()->getClass();
$_htmlName    = $this->getElement()->getName();
$_readonly    = $this->getElement()->getReadonly();

$collection = Mage::registry('rkstorelocator_data')
                ->getOpeningHours()
                ->setOrder('sortorder', 'ASC');

$_counter = 0;
?>
<tr>
    <td class="label"><?php echo $this->getElement()->getLabel() ?></td>
    <td colspan="10" class="grid hours">
        <table id="attribute-options-table" class="dynamic-grid rkstorelocator-officehours" cellspacing="0" cellpadding="0"><tbody>
            <tr>
                <th><?php echo $this->__('Day label') ?></th><th><?php echo $this->__('Opening hour') ?></th><th><?php echo $this->__('Closing hour') ?></th><th><?php echo $this->__('Sortorder') ?></th>
                <th><button id="add_new_option_button" title="Add Option" type="button" class="scalable add"><span><span><span><?php echo $this->__('Add Option') ?></span></span></span></button></th>
            </tr>
<?php foreach ($collection as $_item): ?>
<tr class="option-row rkstorelocator-officehours-dayrow" id="hour-row-<?php echo $_counter?>">
    <td><input name="<?php echo $_htmlName; ?>[value][option_<?php echo $_counter ?>][dayindicator]" value="<?php echo $_item->getDayindicator() ?>" class="input-text" type="text"></td>
    <td><input name="<?php echo $_htmlName; ?>[value][option_<?php echo $_counter ?>][openinghour]" value="<?php echo $_item->getOpeninghour() ?>" class="input-text" type="text"></td>
    <td><input name="<?php echo $_htmlName; ?>[value][option_<?php echo $_counter ?>][closinghour]" value="<?php echo $_item->getClosinghour() ?>" class="input-text" type="text"></td>
    <td><input name="<?php echo $_htmlName; ?>[value][option_<?php echo $_counter ?>][sortorder]" value="<?php echo $_item->getSortorder() ?>" class="input-text" type="text"></td>
    <td class="a-left" id="delete_button_container_option_<?php echo $_counter ?>'">
        <input name="<?php echo $_htmlName; ?>[value][option_<?php echo $_counter ?>][id]" value="<?php echo $_item->getId() ?>" type="hidden">
        <input id="delete-row-<?php echo $_counter ?>" type="hidden" class="delete-flag" name="<?php echo $_htmlName; ?>[delete][option_<?php echo $_counter ?>]" value=""/>
        <button onclick="$('hour-row-<?php echo $_counter ?>').style.display='none'; $('delete-row-<?php echo $_counter ?>').setValue(1);" title="Delete" type="button" class="scalable delete delete-option"><span><span><span>Delete</span></span></span></button>
    </td>
</tr>
<?php
        $_counter++;
    endforeach;
?>
</tbody></table>

<script type="text/javascript">//<![CDATA[

var _form_html_row = '<tr class="option-row rkstorelocator-officehours-dayrow" id="hour-row-{{id}}"><td><input name="<?php echo $_htmlName; ?>[value][option_{{id}}][dayindicator]" value="" class="input-text" type="text"></td><td><input name="<?php echo $_htmlName; ?>[value][option_{{id}}][openinghour]" value="" class="input-text" type="text"></td><td><input name="<?php echo $_htmlName; ?>[value][option_{{id}}][closinghour]" value="" class="input-text" type="text"></td><td><input name="<?php echo $_htmlName; ?>[value][option_{{id}}][sortorder]" value="" class="input-text" type="text"></td><td class="a-left" id="delete_button_container_option_{{id}}"><input name="<?php echo $_htmlName; ?>[value][option_{{id}}][id]" value="" type="hidden"><input id="delete-row-{{id}}" type="hidden" class="delete-flag" name="<?php echo $_htmlName; ?>[delete][option_{{id}}]" value=""/><button onclick="$(\'hour-row-{{id}}\').style.display=\'none\'; $(\'delete-row-{{id}}\').setValue(1);" title="Delete" type="button" class="scalable delete delete-option"><span><span><span>Delete</span></span></span></button></td></tr>';

var _rkstorelocator_counter = <?php echo $_counter?>;

$('add_new_option_button').observe('click', function(){
    $('attribute-options-table').insert(_form_html_row.replace(/\{\{id\}\}/ig, _rkstorelocator_counter));
    _rkstorelocator_counter++;
});

//]]></script>
    </td>
</tr>

And the result: enter image description here

Dear future Googlers, By the time you read this Magento 2.x will be released. Let's hope Magento has made this kind of stuff a little bit easier. :)

Best Answer

Related Solutions

Magento – Making rows clickable in Adminhtml Cms Block Grid

Magento – Best way to add a dynamic grid as input in custom extension Adminhtml

Related Topic