CGridView. Add custom class to table rows preserving original „odd“ and „even“

  1. Implementation
  2. Comments

Lets say we have such a CGridView widget showing a list of users for administrator. Users have status „active“ or „disabled“. Grid widget puts class „odd“ or „even“ to rows and we want to preserve this. So we want to add a class „disabled“ to rows with disabled users.

Implementation

<?php
$this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'user-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'rowCssClassExpression' => '
		( $row%2 ? $this->rowCssClass[1] : $this->rowCssClass[0] ) .
		( $data->status ? null : " disabled" )
	',
	'columns'=>array(
		'username',
		array(
			'name' => 'status',
			'value' => '$data->status0->title',
		),
		array(
			'class'=>'CButtonColumn',
			'header' => Yii::t( 'app', 'Tools' ),
		),
	),
));
?>

Comments

$model here is a User model pushed to view from controller. $data->status0->title here is User's property from relation to other model (why it is $data and not $model see bellow).

rowCssClassExpression

All „magic“ we do in „rowCssClassExpression“ property. Its value is a PHP expression. Expression is evaluated for every data row. Result of evaluation is used as the CSS class name. Note, that PHP expression is string.

cssClassExpression

We put „rowCssClassExpression“ property to „top“ CGridView properties – thus class will be aplied to row. If we put another „cssClassExpression“ property to some column – we can set a class for single cell. E.g.:

<?php
array(
	'name' => 'status',
	'value' => '$data->status0->title',
	'cssClassExpression' => '"foo" . (2+3) ."bar"',
),
));
?>

as result we will have ~~~ [html]

~~~ (note the difference between „rowCssClassExpression“ and „cssClassExpression“) From widget you can access such a variables:
  • $row : the row number (zero-based)
  • $data : the data model for the row
  • $this : the column object. As you can see we use all of them.
    Expressions

    This

( $row%2 ? $this->rowCssClass[1] : $this->rowCssClass[0] ) .

evaluates to 0,1,0,1... as rows are processed and original „odd“ or „even“ values are returned. CGridView::rowCssClass property is array containing default class values (in means of html element attribute). This property is ignored in widget because of rowCssClassExpression property is used. But values are accessible :) This expressions then is concatenated (note dot at the end) with:

( $data->status ? null : " disabled" )

$data here is User model and „status“ is its property (0 or 1 in this case). You can't access $model variable from those string expressions.

7 0
4 followers
Viewed: 42 462 times
Version: 1.1
Category: How-tos
Written by: Maug Lee
Last updated by: yugene
Created on: Jun 1, 2013
Last updated: 3 years ago
Update Article

Revisions

View all history

Related Articles