CGridView - custom column data formatting

Yii 1.1 General Discussion
1

Well,

Presume I have a boolean data type in given column of a CGridView and I would like to display ‘True’ values in green and ‘False’ ones in red color.

Any idea how to get this task completed?

For the time being I have the following column code:


'columns'=>array(

   array('name'=>'myBooleanColumn',

         'htmlOptions'=>array('style'=>'text-align:center'),

         'value'=>'$data->myBooleanField?"True":"False"'),

),

This is working well but I am unable to get desired coloring :frowning:

Thanks ahead!

2

You could make a green and red class and change to this:


'columns'=>array(

   array(

         'name'=>'myBooleanColumn',

         'htmlOptions'=>array('style'=>'text-align:center'),

         'value'=>'$data->myBooleanField?"True":"False"'

         'cssClassExpression'=>'$data->myBooleanField?"greenFontClass":"redFontClass"',

   ),

),

Or this:


'columns'=>array(

   array(

         'name'=>'myBooleanColumn',

         'htmlOptions'=>array('style'=>'text-align:center'),

	 'type'=>'raw',

	 'value'=>'$data->myBooleanField?"<span style=\"color: green;\">True</span>":"<span style=\"color: red;\">False</span>"',

   ),

),
3

Yeap,

I found the solution using custom formatter:

  1. Create a new file in /protected/extensions folder and call it BoolFormatter.php. Then write the following code inside:

<?php

class BoolFormatter extends CFormatter

{

 

    public function formatBool($value)

    {

        if($value){

            return '<span style="color:green">True</span>';

	}else{

		return '<span style="color:red">False</span>';

	}

    }

}

?>
  1. Add the following entry to /protected/config/main.php in its ‘components’ array:

'format' => array('class' => 'application.extensions.BoolFormatter',),
  1. Use the following code to format column in CGridView:



array('name'=>'myBooleanColumn', 'type'=>'bool', 'htmlOptions'=>array('style'=>'text-align:center')),

Bingo! - The noughts and ones taken from the database will be shown centered nicely as red ‘Falses’ and green ‘Trues’ :slight_smile: