YII CGridView add a custom button like edit,delete,import etc

Add a custom button to YII CGridView like update,delete buttons

You can use template property to change order of build-in buttons or add/remove new buttons like this:

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

In CGridView's buttons column build upon above example there will be no view button and delete and update buttons will be in other than default order (delete first).

You can use the same property to introduce new buttons:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{up}{down}{delete}',
)

For new buttons (and of course - for existing, build-in ones too!) you have to specify look and behaviour.buttons property of CButtonColumn is used for it. This property is an array of buttons id (which names must correspond to the one provided in template property) and each button is another array holding its specific properties.

Here you can use:

'buttonID' => array
(
    'label'=>'...',     //Text label of the button.
    'url'=>'...',       //A PHP expression for generating the URL of the button.
    'imageUrl'=>'...',  //Image URL of the button.
    'options'=>array(), //HTML options for the button tag.
    'click'=>'...',     //A JS function to be invoked when the button is clicked.
    'visible'=>'...',   //A PHP expression for determining whether the button is visible.
)

Please, note: Text in label property is displayed only, if you have a textual link! If you are using images (build-in or own) instead of text links, text hold in this property will be rendered as image's alt parameter. If you want to change text of tooltip, which is displayed when user hovers your image button, you have to edit optionsproperty instead and give the text to its title parameter, like this:

'buttonID' => array
(
    'label'=>'Text shown as alt text to image or as label to text link...',
    'options'=>array('title'=>'Text shown as tooltip when user hovers image...'),
)

There are similar remarks for above mentioned properties like the one described in first part of this text:

1. In PHP expression used for url or visible properties, you can use variable $row for the row number (zero-based) and $data for the data model for the row.
2. If you provide an empty string for imageUrl or set it to false, a textual link will be used instead.

Finally here is an example of introducing new buttons to CButtonColumn:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{email}{down}{delete}',
    'buttons'=>array
    (
        'email' => array
        (
            'label'=>'Send an e-mail to this user',
            'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',
            'url'=>'Yii::app()->createUrl("users/email", array("id"=>$data->id))',
        ),
        'down' => array
        (
            'label'=>'[-]',
            'url'=>'"#"',
            'visible'=>'$data->score > 0',
            'click'=>'function(){alert("Going down!");}',
        ),
    ),
),

Please note, that since jQuery is used here, any function passed to click should be surrounded by proper jQuery function call. That is why, we are using 'click'=>'function(){alert("Going down!");}' instead of simple'click'=>'alert("Going down!");'.

Above example also shows (email button) how to create a valid URL containing controller and view plus current user ID (or any other data from model for current row). It also explains how to use baseUrl function fromCHttpRequest class to set an image for button to be a file stored outside protected folder.

Specific delete confirmation 

You may notice that a standard set of views generated for CRUD operations by Gii includes (in view and update views) delete menu item with confirmation. This confirmation text can be easily changed/extended to include some record (model) specific data, like record ID.

This is not so simple in CGridView (CButtonColumn), as deleteConfirmation property is not parsed. However, there is a tricky way to achieve this (thanks to mdomba for providing it!) using jQuery. Here is an example:

array
(
        'class'=>'CButtonColumn',
        'deleteConfirmation'=>"js:'Record with ID '+$(this).parent().parent().children(':first-child').text()+' will be deleted! Continue?'",
),

We can also use jQuery's ntn-child function for retrieve contents of other column:

array
(
        'class'=>'CButtonColumn',
        'deleteConfirmation'=>"js:'Do you really want to delete record with ID '+$(this).parent().parent().children(':nth-child(2)').text()+'?'",
),

The jQuery function looks really tricky freeky at first sight. If you wish to know, why it has to be in that form, please read this forum post.