Popup windown on adminhtml grid

Question

I have a grid in the Dashboard page to show all unread contacts, it look like 'Last 5 Orders' grid. So now I want to when I click on the row of grid then the popup window will open and show the contact detail. Please give me sugessions? Thanks a lot!!!

Answer 1

You can try http://inchoo.net/magento/magento-popup-dialog/

>> Create some Adminhtml form block in which you will add the button that will call our popup dialog.

For example:

 <?php
class Inchoo_TestModule_Block_Adminhtml_TestPopup_Edit_Form extends Mage_Adminhtml_Block_Widget_Form {


protected function _prepareForm() {

    $form = new Varien_Data_Form(array(
        'id' => 'edit_form',
        'action' => $this->getUrl('*/*/save'),
        'method' => 'post',
        'enctype' => 'multipart/form-data',
            )
    );

    $base_fieldset = $form->addFieldset(
            'base', array(
        'legend' => Mage::helper('testmodule')->__('Test data'),
            )
    );


    $base_fieldset->addField(
            'authorize_btn', 'button', array(
        'name' => 'authorize_btn',
        'label' => Mage::helper('testmodule')->__(
                'Click on folowing link to test popup Dialog:'
        ),
        'value' => $this->helper('testmodule')->__('Test popup dialog >>'),
        'class' => 'form-button',
        'onclick' => 'javascript:openMyPopup()'
            )
    );

    $form->setUseContainer(true);
    $this->setForm($form);

    parent::_prepareForm();
}


}

You can notice that I added a button that calls: javascript:openMyPopup();

>> After that we need to set custom template file for this screen in order to be able to add custom javascript in document:

Add in some of layout xml files inside app/design/adminhtml/yourpackage/yourtheme/layout …

    <?xml version="1.0"?>
<layout>
    <adminhtml_yourcontroller_youraction>
        <reference name="content">
            <block type="testmodule/adminhtml_testscreen"
                   name='inchoo.restconnect.adminhtml.testscreen' template="testscreen/edit.phtml">
            </block>
        </reference>
        <reference name="head">
            <action method="addItem">
                <type>js_css</type>
                <name>prototype/windows/themes/default.css</name>
            </action>
            <action method="addCss">
                <name>lib/prototype/windows/themes/magento.css</name>
            </action>
        </reference>
    </adminhtml_yourcontroller_youraction>
</layout>

As you can see, we added our edit screen’s block in content and set the custom template to it. Also we added some css references into the head block in order to apply predefined Magento admin theme styles on out Popup dialog.

**>>**Let’s finally show how our template file should look like:

<?php echo $this->getFormInitScripts() ?>
<script type="text/javascript">
    function openMyPopup() {

        var url = '<?php echo $this->getUrl('adminhtml/dashboard/index') ?>?';

        if ($('browser_window') &amp;&amp; typeof(Windows) != 'undefined') {
            Windows.focus('browser_window');
            return;
        }
        var dialogWindow = Dialog.info(null, {
            closable:true,
            resizable:false,
            draggable:true,
            className:'magento',
            windowClassName:'popup-window',
            title:'Test popup Dialog',
            top:50,
            width:300,
            height:150,
            zIndex:1000,
            recenterAuto:false,
            hideEffect:Element.hide,
            showEffect:Element.show,
            id:'browser_window',
            url:url,
            onClose:function (param, el) {
                alert('onClose');
            }
        });
    }

    function closePopup() {
        Windows.close('browser_window');
    }

</script>
<div class="content-header">
    <?php echo $this->getHeaderHtml() ?>
    <p class="form-buttons"><?php echo $this->getButtonsHtml('header') ?></p>
</div>
<?php echo $this->getFormHtml() ?>
<?php if ($this->hasFooterButtons()): ?>
<div class="content-footer">
    <p class="form-buttons"><?php echo $this->getButtonsHtml('footer') ?></p>
</div>
<?php endif; ?>
<?php echo $this->getFormScripts() ?

Here you can see the function openMyPopup() that opens the dialog. Also, you can notice that we have the callback function onClose() implemented: that triggers after we close Popup dialog.

One more handy function is implemented and that is: closePopup() function. When some operation in popup dialog is finished, we can call:

this.parent.closePopup();

Courtesy: Inchoo

Answer 2

Its not working in my end.

Here is my code

<?php echo $this->getFormInitScripts() ?>
<script type="text/javascript">
alert('show');
    function openMyPopup() {

        var url = '<?php echo $this->getUrl("adminhtml/dashboard/index") ?>';
 console.log(url);
        if ($('browser_window') && typeof(Windows) != 'undefined') {
            Windows.focus('browser_window');
            return;
        }
        var dialogWindow = Dialog.info(null, {
            closable:true,
            resizable:false,
            draggable:true,
            className:'magento',
            windowClassName:'popup-window',
            title:'Test popup Dialog',
            top:50,
            width:300,
            height:150,
            zIndex:1000,
            recenterAuto:false,
            hideEffect:Element.hide,
            showEffect:Element.show,
            id:'browser_window',
            url:url,
            onClose:function (param, el) {
                alert('onClose');
            }
        });
    }

    function closePopup() {
        Windows.close('browser_window');
    }

</script>
<div class="content-header">
    <?php echo $this->getHeaderHtml() ?>
    <p class="form-buttons">
    <?php echo $this->getButtonsHtml('header') ?>
    </p>
</div>
<?php echo $this->getFormHtml() ?>
<?php if ($this->hasFooterButtons()): ?>
<div class="content-footer">
    <p class="form-buttons"><?php echo $this->getButtonsHtml('footer') ?></p>
</div>
<?php endif; ?>
<?php echo $this->getFormScripts() ?>