0

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!!!

0

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

  • Thank you for your support. But I tried this before I post this question. It don't like my situation. Onclick action don't work on grid. :( – Tuấn Nguyễn Oct 19 '16 at 6:50
  • you should have not copy complete solution and paste as an answer here. Rather than you can provide blog link for reference. – Rahul Feb 22 at 4:01
0

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() ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.