Skip to content


Customising CGridView – CButtonColumn Image Swap

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

Further to that post, we will now look at customising CButtonColumn to display a different status button image according to whether ‘status’ is set to 0 or 1. There are several ways to do this and I will outline my preferred method.

The first thing to note with CButtom column is that only the ‘url’ in the ‘button’ array is eval()ed, thus we cannot pass $data->status directly to ‘imageURL’ (would be easy!). The simplest way to get past this limitation is to extend the CButtonColumn class:

class CustomButtonColumn extends CButtonColumn
        protected function renderButton($id, $button, $row, $data)
                if(isset($button['options']['data-status'])) {
                        $button['imageUrl'] = $this->evaluateExpression("($data->status == 1 ? Yii::app()->request->baseUrl.'/images/icn/status_on.png': Yii::app()->request->baseUrl.'/images/icn/status_off.png')", array('data' => $data, 'row' => $row));
                parent::renderButton($id, $button, $row, $data);

Here we can see that is our record ‘status’ is set to 1 we display status_on.png, otherwise we display status_off.png. Please make sure that these images exist! The class detects whether ‘data-status’ is set in the ‘options’ array and if so displays our custom buttons, otherwise our button will be displayed in the regular way by the parent class.

Save this file as CustomButtonColumn.php in your /protected/components/ directory

Next we need to change the CButtonColumn class in our CGridView to use our new extension:





Next we need to modify our button array to take advantage of our new class extension:

				'status' => array
					'url'=>'Yii::app()->createUrl("mycontroller/status", array("id"=>$data->id))',
					'options' => array('data-status' => 1, 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}')),

You will notice that we no longer have ‘imageURL’ as this is handled completely by our class extension, which looks to for ‘data-status’ and if set will generate the URL for the appropriate image according to ‘status’.

Great stuff!

Posted in PHP, Yii Framework.

7 Responses

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

  1. Adit says

    Hi. I just wanted to say thanks for all your Yii tips and snippets that you have posted. I have been directed to your website quite a few times after searching for answers to questions I had. I hope you keep posting!

  2. Blane says

    One more thing if u want to change format of date u can put this code for model file:

    public function afterFind()
        $this->order_date = strtotime($this->order_date);
        $this->order_date = date( m/d/Y', $this->order_date);
        $this->created_at = strtotime($this->created_at);
        $this->created_at = date( m/d/Y', $this->created_at);
        parent::afterFind ();
  3. Matti says

    More correctly it should be like this:

        protected function afterFind()
            $this->order_date = date ('Y-m-d', $this->order_date);
            return parent::afterFind();
        protected function beforeValidate()
            $this->order_date = strtotime($this->order_date);
            return parent::beforeValidate();

    That’s assuming that the date is stored as a timestamp in the db. The second is required to convert back to correct format on model save.

  4. Sven says

    Great post. Thank you. This may be an overly simplistic question.

    Any idea on how I would make the button echo only the contents of an SQL table field in a new tab?

    • Matti says

      Hello Sven,

      I’m not sure what you mean by “in a new tab”?

      The button text is in the ‘label’ attribute of the array, so:


      Then if you omit ‘imageUrl’ it will just display a text link.

      • Sven says

        oh Sorry. I meant in a new Web Browser tab.

        Basically I want the new button function to spit out/echo the contents of the specific field in an SQL table row.

Continuing the Discussion

  1. Customising CGridView – Custom CButtonColumn Ajax Buttons – Matti Ressler linked to this post on September 8, 2012

    [...] Using Class Properties To Minimise Database Queries And Code Execution Customising CGridView – CButtonColumn Image Swap [...]

Some HTML is OK

or, reply to this post via trackback.

three × = six