CGridView - how to color rows depending on data values

I have Order model.

Displaying it with CGridView it would be nice to color the rows depending on $model->order_status which is an integer from 1 to 5 for example, so 5 colors.

Could it be done by simple settings of CGridView ?

CGridView::rowCssClassExpression

Thanks, Qiang.

Only found this example.


 'rowCssClassExpression'=>'$data->open_ticked?"row-open":"row-closed"',

How to use more complex logic? put it an method of some helper class, and call method in

‘rowCssClassExpression’ ?

You could write a method in the model class which returns the desired css class name based on some attribute value.

I cannot figure out how to obtain the value of an attribute within the method I have created in my model. I have:


public function assignClass($row,$data)

{	

		

   return $row;//returns an integer the number or row which is of now help

   return $data;//returns an object of CGridView but don't know how to get the value of an attribute

}

return $row;//returns an integer the number or row which is of now help

return $data;//returns an object of CGridView but don’t know how to get the value of an attribute

any help would be appreciated

regards,

bettor

I too would like to change the css attributes of the Gridview, so any clear examples would be helpful, like where in the model would this get implemented.

$this->{attribute name}

Thanks for your help. This however returns the metadata for the attribute. What I would like to know is how to return the value of a CGridView attribute after dataProvider has been loaded so I can calculate the CSS class to display. I had no luck with $this->{attribute name}.

Any other suggestions.

Cheers,

bettor

OK. Finally resolved it.

Not sure if it is the only way but in my method I called the value of an attribute via:


$data->dataProvider->data[$row]->attributeName;

I couldn’t find this documented anywhere!!!

Regards,

bettor

$data->attributeName should work…

It doesn’t for me.

I read a few different posts on this topic and worked out the solution although none of them put all the ingredients into a single post so I thought I would post this now for the benefit of the next person.

I want to display a different color depending on the status of an order.

Firstly I map the status (an int) to the color desired in my model as a get property :




    public function getColor() {

        

        $statuscolor='white';

        switch ($this->status) {

            case 1:

                $statuscolor='green';

                break;

            case 2:

                $statuscolor='yellow';

                break;

            case 3:

                $statuscolor='pink';

                break;

            case 4:

                $statuscolor='white';

                break;       

        }

        return $statuscolor;

        

    }



Now I define styles (in my default .css file) to override the yii styles (alternate colors) for this grid. Note that I could have been a bit smarter and also overridden the odd/even color with some sort of shading but I wasnt feeling that smart. Also you could add definitions for the hover color (I might add this):




tr.pink

{

	background: #FFCCCC;

}

tr.green

{

	background: #CCFF99;

}

tr.yellow

{

	background: #FFFF99;

}

tr.white

{

	background: #FFFFFF;

}



Now its just a matter of telling the gridview to use the styles:




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

            	'id'=>'profit-grid',

            	'dataProvider'=>$model->search(),

                'filter'=>$model,


                'rowCssClassExpression'=>'$data->color',


            	'columns'=>array(

                    'order_id',

                    'payment_id',

                    'date_order',

...

                    'recipient',

            	),

            ));




I have removed some of the detail - the interesting bit is the rowCssClassExpression - by setting that to the color property that we defined in our model we override the row color with the color as per the css.