Yii: CGridView and show detail in CJuiDialog

Instead of going to a different page to view detail from a grid row, I’d like to show detail from pop-in / dialog box within the same page. This article from Yii’s documentation does exactly that. The article provide solutions to open one or multiple dialogs.

Here’s document how to show detail using the single dialog with slight modification to the codes in the article for my own reference.

Overwrite the view button

In view file, add the following to CButtonClass section of the array:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    .....
    'columns' => array(
        ....
        array(
            'class' => 'CButtonColumn',
            'buttons' => array(
                'view' => array(
                    'url' => 'url' => 'Yii::app()->createUrl("/path/to/controller/view")',
                    'options' => array(
                        'ajax' => array(
                            'type' => 'POST',
                            'url' => "js:$(this).attr('href')",
                            'update' => '#detail-section',
                        ),
                    ),
 
                ),    // view button
            ),
        ),
    )
)) ?>

Note:

  • line 11: the ajax section. Yii will automatically generate the required jQuery based on these data.
  • line 14: the # name should match that in the following section.

Add dialog section

In the same view file, add the following:

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
        'id' => 'dlg-detail',
        'options' => array(
            'title' => 'Dialog Box Title',
            'closeOnEscape' => true,
            'autoOpen' => false,
            'model' => false,
            'width' => 550,
            'height' => 450,
        ),
)) ?>
<div id="detail-section"></div>
<?php $this->endWidget() ?>

note:

  • line 3: for options check this demo page.
  • line 12: the id should match line 14 from above code.

Change the view action

In controller file:

public function actionView($id) {
    if (Yii::app()->request->isAjaxRequest) {
        $this->renderPartial('_view', array(
            'model' => $this->loadModel($id),
        ), false, true);
 
        Yii::app()->end();
    }
}

Note: the view only shows up in dialog. if want to allow to show on a page on its own, add else statement.

1 thought on “Yii: CGridView and show detail in CJuiDialog

  1. Roy M J Reply

    Hi.. This has given an a detailed idea. Kindly let me know if it is possible to pull out an existing view page into the dialog popup.

Leave a Reply

Your email address will not be published. Required fields are marked *