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
clickjavascript which is executed with the onClick event
visibleconditions under which this button is visible, perhaps using isAdmin() to check superuser status
labelthe label that is used if no image is specified
imageURLthe url of the icon image for this button
optionsarray 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/


Did you know you can hire me?

I take on projects of all sizes. From Consulting to large Development Projects.

If you're starting a new Yii project and would like some help to get setup and running or you need some help with a particular module or you just need someone to develop the whole dang thing, then just ask ...


Beginning Yii ...

I'm very excited about a new Yii Training course that has just been published.

The course is designed for anyone wanting to learn Yii, whether new to frameworks or converting from another.

Eight chapters, each having five videos of between 3 and 5 minutes, take you through the basics of the Yii Framework, building a web application step-by-step.

Save 40% - introductory offer $20.99 / £13.19 / €16.19 / A$20.99

Leave a Comment

twitterfacebookgooglelinkedin https://me.yahoo.com