Skip to content


Customising CGridView – Custom CButtonColumn Ajax Buttons

Yii CGridView comes with standard view, edit and delete buttons for standard actions generated by Yii CRUD.  Often however we require more, eg. a button to set the status of a record.  In this post we look at how to quickly and simply add a custom button to cGridview, in this case we will name our new button as ‘status’. The purpose of this button will be to set the status of a record to either 0 or 1 (depending on what it currently is).

First we need to create the required action in our controller, we will call it simply ‘status’.  To begin we add it in our controller rules ‘actions’ array:

      'actions'=>array('view', 'update', 'delete', 'status')),

Next we need to create an action for setting our record status:

public function actionStatus($id)
    $model = MyModel::model()->findByPk($id);  // use whatever the correct class name is
    $model->status = ($model->status ==1 ? 0 : 1);

    return true;

Now we are ready to create our custom button.  If you look at a standard Yii generated cGridview, toward the bottom you will see the following:


This we need to extend to include both our standard buttons plus our new custom button, making use of ‘ajax’ in the ‘options’ array:

     'template' => '{view}{update}{status}{delete}',  //include the standard buttons plus the new status button
         'status' => array
             'imageUrl'=>'images/icn/status.png',  // make sure you have an image
             'url'=>'Yii::app()->createUrl("mycontroller/status", array("id"=>$data->id))',
             'options' => array( 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}')),

Important things to note above:

  1. You need an image for your new button, I have used ‘images/icn/status.png’
  2. For the yiiGridView update() function, make sure that you enter the correct ID for your grid

Simple, huh?

Next we look at displaying a different button image according to whether our record $data->status is 0 or 1:  Customising CGridView – CButtonColumn Image Swap

Posted in PHP, Yii Framework.

5 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Jitendra says

    hi sumwai,I have just started Yii framework and done with blog application by both ways(with and without scafolding)could you please send me a step-by-step a good example code so i can understand in-depth.

  2. Nicodema says

    Hi Matti, this is exactly the code I needed, all work done!!, but now I want do the same with a message confirm, that when click this button ask me if I am sure and keep with call to controller function.
    I hope you can help me and very sorry for my english.
    Thank you!!!

  3. IZZA says

    This is a very simple tutorial thanx so much

Continuing the Discussion

  1. Customising CGridView – CButtonColumn Image Swap – Matti Ressler linked to this post on September 8, 2012

    [...] If you haven’t already done so, please read my post Customising CGridView – Custom CButtonColumn Ajax Buttons/ [...]

  2. Customising CGridView – CButtonColumn Ajax Update the Grid Using $data – Matti Ressler linked to this post on September 22, 2012

    [...] Customising CGridView – Custom CButtonColumn Ajax Buttons [...]

Some HTML is OK

or, reply to this post via trackback.

+ six = fifteen