Yii 1.1: Bootstrap Yii cGridView add popup button

3 followers

Hi,

When I customize yii cgridview I was stuck with loading an item in popup through ajax with custom button in the grid view of bootstrap. I use this yii bootstrap extension. Then finally I got the following code works fine.

First Create your custom button as follows

Here I am using show items button for loading the invoice items in popup.

'class' => 'CButtonColumn',
                'template' => '{items}{update}{delete}', // Items is my custom button
                'buttons' => array(
                    'items' => array( // My custom button options
                        'label' => 'Show Items',
                        'url' => 'CHtml::normalizeUrl(array("invoice/items/id/". $data->id . "&ajax=true"));', // My ajax url
                        'imageUrl' => Yii::app()->baseUrl . '/images/items.png',
                        'click' => 'function(e) {
                                      $("#ajaxModal").remove();
                                      e.preventDefault();
                                      var $this = $(this)
                                        , $remote = $this.data("remote") || $this.attr("href")
                                        , $modal = $("<div class=\'modal\' id=\'ajaxModal\'><div class=\'modal-body\'><h5 align=\'center\'> <img src=\'' . Yii::app()->request->baseUrl . '/images/ajax-loader.gif\'>&nbsp;  Please Wait .. </h5></div></div>");
                                      $("body").append($modal);
                                      $modal.modal({backdrop: "static", keyboard: false});
                                      $modal.load($remote);
                                    }',
                        'options' => array('data-toggle' => 'ajaxModal','style' => 'padding:4px;'),
                    ),
 
                'htmlOptions' => array('style' => 'width: 100px;text-align: left;'),
            ),

From the controller action I partially render the output. i.e

$this->renderPartial('items');

For view I used this code

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Your Model header</h4>
        </div>
        <div class="modal-body">
            <div class="well">
                  Content of your modal body
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
        </div>
    </div>
</div>

Cheers!

Total 6 comments

#18071 report it
Arockia Johnson at 2014/09/04 01:04am
Befree Nishant

Nice Befree Nishant ! Thanks for sharing

Best of Luck! Cheers!

#18070 report it
Befree Nishant at 2014/09/04 12:36am
Solved

'options' => array( 'class' => 'viewdocs', 'title' => '', 'data-toggle'=>"ajaxModal", 'data-target'=>"#uploadDocs" ),

for another col i used same class that's why issue happen,

Thanks

#18069 report it
Befree Nishant at 2014/09/04 12:27am
How to use popup in multiple column

I tried to put this button on multiple column however it open two popup,

Please advice.

$columns = array(
            array('name' => 'jobName', 'header' => 'Job Name', 'value' => '$data["jobName"]'),
            array('name' => 'jobStatus', 'header' => 'Job Status', 'value' => '$data["jobStatus"]'),
            array(
                'class' => 'ext.EDataTables.EButtonColumn',
                'template' => '{update} ',
                'header' => Yii::t('app', 'Action'),
                'buttons' => array(
                    'view' => array(
                        'label' => 'View',
                        'imageUrl' => false,
                        'options' => array(
                            'class' => 'some-css-class-drawing-pretty-icons',
                        ),
                    ),
                    'update' => array(
                        'url'   => 'Yii::app()->createUrl("documents/viewdocs/", array("id"=>$data->job_id))',   
                        'label' => '<div class="btn-group margin-right-5px"><button data-original-title="Upload" data-placement="top" class="btn sr-btn-success pull-right margin-top-zero margin-bottom-zero upload" type="button">
<d class="icon-sr-icons-upload"></d></button></div>',
                        //'label' => '<div class="btn-group margin-right-5px"><a data-original-title="Upload" data-placement="top">View Documents</a></div>',
                        'htmlClass' => '',
                        'icon' => '',
                        'imageUrl' => false,
                        'click' => 'function(e) {
                                      $("#viewDocuments").remove();
                                      e.preventDefault();
                                      var $this = $(this)
                                        , $remote = $this.data("remote") || $this.attr("href")
                                        , $modal = $("<div class=\'modal\' id=\'viewDocuments\'><div class=\'modal-body\'><div class=\'loading-shadow\'><div class=\'loading\'><img src=\'' . Yii::app()->theme->baseUrl. '/images/sr-loading.gif\'></div></div></div></div>");
                                      $("body").append($modal);
                                      $modal.modal({backdrop: "static", keyboard: false});
                                      $modal.load($remote);
                                    }',
                        'options' => array(
                            'class' => 'a',
                            'title' => '',
                            'data-toggle'=>"viewDocuments",
                            'data-target'=>"#uploadDocs"
                        ),
                    ),
                ),
            ),
            array('name' => 'job_created_date', 'header' => 'Submission Date', 'value' => 'date("d/m/Y",strtotime($data->job_created_date))'),
 
            array(
                'class' => 'ext.EDataTables.EButtonColumn',
                'template' => '{update} ',
                'header' => Yii::t('app', 'Action'),
                'buttons' => array(
                    'view' => array(
                        'label' => 'View',
                        'imageUrl' => false,
                        'options' => array(
                            'class' => 'some-css-class-drawing-pretty-icons',
                        ),
                    ),
                    'update' => array(
                        'url'   => 'Yii::app()->createUrl("documents/ajaxupload/", array("id"=>$data->job_id))',                        
                        'label' => '<div class="btn-group margin-right-5px"><button data-original-title="Upload" data-placement="top" class="btn sr-btn-success pull-right margin-top-zero margin-bottom-zero upload" type="button">
<d class="icon-sr-icons-upload"></d></button></div>',
                        'htmlClass' => '',
                        'icon' => '',
                        'imageUrl' => false,
                        'click' => 'function(e) {
                                      $("#ajaxModal").remove();
                                      e.preventDefault();
                                      var $this = $(this)
                                        , $remote = $this.data("remote") || $this.attr("href")
                                        , $modal = $("<div class=\'modal\' id=\'ajaxModal\'><div class=\'modal-body\'><div class=\'loading-shadow\'><div class=\'loading\'><img src=\'' . Yii::app()->theme->baseUrl. '/images/sr-loading.gif\'></div></div></div></div>");
                                      $("body").append($modal);
                                      $modal.modal({backdrop: "static", keyboard: false});
                                      $modal.load($remote);
                                    }',
                        'options' => array(
                            'class' => 'a',
                            'title' => '',
                            'data-toggle'=>"ajaxModal",
                            'data-target'=>"#uploadDocs"
                        ),
                    ),
                ),
            ),
        );
 
        $widget = $this->createWidget('ext.EDataTables.EDataTables', array(
            'id' => 'jobs-grid',
            'dataProvider' => $dataProvider,
            'ajaxUrl' => Yii::app()->getBaseUrl() . '/jobs/pending',
            'columns' => $columns,
            'buttons' => array('refresh'=>NULL),
            'htmlOptions'=>array('class'=>''),
                )
        );
#17451 report it
Daniel Galvan at 2014/06/13 03:46pm
Very Good

Thanks for sharing.

#17401 report it
Arockia Johnson at 2014/06/04 12:42am
Yes It is bootstrap

Hi,

It uses bootstrap.. Already I mentioned the extension which I use for bootstrap..

#17399 report it
Peppe at 2014/06/03 12:11pm
great!

Thank you very much! It's a lot of time I was looking for this.

but... it doesn't use bootstrap at all. Or I'm wrong?

Leave a comment

Please to leave your comment.

Write new article