Yii 1.1: Bootstrap Yii cGridView add popup button

2 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 3 comments

#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