How do you add a button to a CGridView?

Question

Sounds simple, right? I've searched high and low and I can't find out how to do this. I have a CGridView:

$dataProvider = new CArrayDataProvider ($auctions);
$this->widget('zii.widgets.grid.CGridView', array(
  'dataProvider'=>$dataProvider,
  'columns'=>array(
    'id::ID',
    'product.title::Title',
    'state::Status',
  ),
));

I want to add a fourth column that only contains a simple button that will execute javascript when pressed. I've tried:

array(
  'class' => 'CButtonColumn',
),

This just gives me an error:

Undefined property: stdClass::$primaryKey

Any ideas?

Answer 1

Try this:

$dataProvider = new CArrayDataProvider ($auctions);
$this->widget('zii.widgets.grid.CGridView', array(
  'dataProvider'=>$dataProvider,
  'columns'=>array(
    'id::ID',
    'product.title::Title',
    'state::Status',
     array(
         'type' => 'raw',
         'value' => '<button onclick=\'alert("It works!")\' value="clickme"/>'
     )
  ),
));

Answer 2

The best way to do it is with CButtonColumn::template and CButtonColumn::buttons.

array(
    'class' => 'CButtonColumn',
    'template' => '{view} {update} {delete} {copy}',
    'buttons'=>array(
        'copy' => array(
            'label'=>'Copy', // text label of the button
            'url'=>"CHtml::normalizeUrl(array('copy', 'id'=>\$data->id))",
            'imageUrl'=>'/path/to/copy.gif',  // image URL of the button. If not set or false, a text link is used
            'options' => array('class'=>'copy'), // HTML options for the button
        ),
    ),
),

In this example there are the three default buttons and one custom, the 'copy' button. If you don't want some of the default buttons (i.e. view, update and delete), you can remove them. Then, define the properties of the button that you added. I defined label, url, image and html options.