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

Yii 1.1 General Discussion
1

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.

2

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

3

Any simpler way?

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

4

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

5

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

6

maybe u can use CHtml::image…

7

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.

8

You could try:




  'type' => 'html',

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

Take a look at my wiki article CGridView customized datacolumns

This should work too:

In the view:




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

    'dataProvider'=>$dataProvider,

    'columns'=>array(

        ...

        array(            

            'name'=>'status',

            'value'=>array($this,'gridStatusColumn'), 

        ),

    ),

));

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');  

     }       

   ...  

 

}
10

This method works! Thank you so much.

Also thanks for Joblo’s wiki article.

11

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

Thanks!

12

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:




'SurgeryFlag'=>array('name'=>'Flag','value'=>'$data->surgeryFlaged','htmlOptions'=>array('width'=>'50')),

Any help will be much appreciated…Thanks.

Faisal

13

This extension might help as well: PcLinkButton

14

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.




 'SurgeryFlag'=>array('type'=>'raw','name'=>'Flag','value'=>'$data->surgeryFlaged','htmlOptions'=>array('width'=>'50')),

Regards,

Faisal

15

This really helped, thanks!

16

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.