Yii – How to customize a CGridView CbuttonColumn – part 2

Part 2

(see part 1 here)

  array(
    'class'=>'CButtonColumn',
    'template'=>'{update}{add}{delete}',


Always set the class to CButtonColumn.
The ‘template’ option enables you to name your buttons as you wish. Yii understands the basic crud names of ‘update’, ‘view’ and ‘delete’ but you can specify custom names as you wish as I have here with ‘add’.
'buttons'=>array(
  'update'=>array(
    'url'=>'$this->grid->controller->createUrl("/Extras/update", array("id"=>$data->id,"asDialog"=>1,"gridId"=>$this->grid->id))',
    'click'=>'function(){$("#cru-frame").attr("src",$(this).attr("href")); $("#cru-dialog").dialog("open");  return false;}',
    'visible'=>'($data->id===null)?false:true;'


The ‘buttons’ option then gives details about each button using the options:-

url the url which is called
click javascript which is executed with the onClick event
visible conditions under which this button is visible, perhaps using isAdmin() to check superuser status
label the label that is used if no image is specified
imageURL the url of the icon image for this button
options array of HTML options (eg: ‘class’=>’gridButton’, ‘width’=>’16px’)

In my code I specified

url=>'$this->grid->controller->createUrl("/Extras/update", array("id"=>$data->id,"asDialog"=>1,"gridId"=>$this->grid->id))'

This calls createUrl to generate a URL with parameters for id, asDialog and gridId which results in a GET style url such as

http://myserver.net/extras/update/56?asDialog=1&gridID=extras-grid

I then specified an onClick function which generates a javascript function.  In an admin backend, where I do NOT have the general public, I find it much quicker and easier using iframes to serve pop-up dialogs than embedded AJAX functions.  I find you get less conflicts with jQuery libraries etc.  You can find the original article by joblo on the Yii wiki

In summary, this javascript sets the src attribute of an embedded iframe object

‘function(){$(“#cru-frame”).attr(“src”,$(this).attr(“href”));

Then you set the object to visible

$(“#cru-dialog”).dialog(“open”);

Always return false to avoid any javascript failures.

return false;}’,

This means that the iframe object can reference a controller action which is independant of your current page.  This makes testing far easier as you can easily grab the URL and open another browser window to test this call.  In the Controller Action being called, you can use the asDialog parameter to check whether this action is being called through an iframe and use a very basic layout to render this view.

Also, in the Controller Action, you embed the javascript code to close the iframe when complete.  At the same time, you can inject any returned results into you parent frame. See this post for more details on this…
Lastly, I set the visible option to true or false depending on a value within the grid.  This particular example displays all the options you can buy with this holiday and whether the customer has selected them or not.  Therefore, using the id of the linking table as an indication of whether this item has been created or not enables or disables the ‘Add’ button

‘visible’=>'($data->id===null)?true:false;’

Further reading:-
http://www.yiiframework.com/wiki/106/using-cbuttoncolumn-to-customize-buttons-in-cgridview/

Let’s Start a Project!

Contact Me