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!