How to display image in GridView Widget based on DB field value?

I have a field named ‘status’ in DB table, and it’s value is 1 or 0. Instead of displaying 1 or 0 in GridView table, I prefer to display an image with checked-icon or cross-icon.

How can I do this? Thanks for your help.

Create a method in your model with this logic and call that method in your grid

Any simpler way?

I think the GridView should have some properties for rendering html, anyone knows?

It does, ‘type’=>‘html’,

Could you explain in detail? Where to call the method in model?

maybe u can use CHtml::image…

In fact, I want my code like this:

<td><span class="<?php if($user['status'] == '1') echo 'ico-check'; else echo 'ico-cross';?>"></span></td>

I just want to know how to implement it with GridView.

You could try:

  'type' => 'html',

  'value' => 'CHtml::tag("span", array("class" => $data->status ? "ico-check" : "ico-cross"), "")'

Take a look at my wiki article CGridView customized datacolumns

This should work too:

In the view:

$this->widget('zii.widgets.grid.CGridView', array(










In the controller:

class MyController extends Controller 



     protected function gridStatusColumn($data,$row)


       $image = $data->status == 1 ? '/images/checked-icon.png' : '/images/cross-icon.png';   


       return CHtml::image(Yii::app()->baseUrl . $image,'Status');  





This method works! Thank you so much.

Also thanks for Joblo’s wiki article.

Great solution. This doesn’t seem straightforward, is there a place I can look to understand solutions such as these?


I am having problem in this, I get the following as contents of my grid column:

<img src="/webapp/images/tickedS.jpg" alt="" />

I have following the approach of creating model property and then calling it in the CGridView column. Following is the code of model:

	public function getSurgeryFlaged(){

		return $this->flag_for_dashboard=='Y' ?  CHtml::image(Yii::app()->baseUrl .'/images/tickedS.jpg') : '';  


Following is the code from CGridView column:


Any help will be much appreciated…Thanks.


This extension might help as well: PcLinkButton

I got the solution from other forum. The solution is to add "type" of column as "raw". Please see below code that works to show image in Grid Column.




This really helped, thanks!

This is how I did it:

 array('type'=>'raw','name'=>'contactByPhone','header'=>'By Phone','value' => '($data->contactByPhone == 0) ? "" : "<img src=\"'.Yii::app()->getBaseUrl(true).'/images/tick2.png'.'\">"'),

If there is a simpler way please let me know, but this works perfectly.