Bootstrap Yii cGridView add popup button


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) {
                                      var $this = $(this)
                                        , $remote = $"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>");
                                      $modal.modal({backdrop: "static", keyboard: false});
                        '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


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 class="modal-body">
            <div class="well">
                  Content of your modal body
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>


1 0
Viewed: 18 341 times
Version: 1.1
Category: How-tos
Written by: Arockia Johnson SR
Last updated by: Arockia Johnson SR
Created on: May 27, 2014
Last updated: 6 years ago
Update Article


View all history

Related Articles