yii: CGridView and show detail in CJuiDialog

by prettyscripts on 2012-02-03 12:19

yii

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. i found an article from yii's documentation that 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:

<?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:

<?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:

PHP:

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.