Yii CGridView change the header's tr class - yii

Question

So i am working in an app that uses de CGridView extensively but I am porting a webapp from a proprietary framework to Yii. So the CSS files are already written and have been working up until now.
The thing is that in my CGridView widget the headers of columns are enclosed in a TR tag and I have got no clue on where I can add a class attribute to this tag. I've read the documentation and now how to change each header cell individually but not the whole TR.
Thanks for your help!

Answer 1

Ran into a similar problem however as our CSS is for a legacy system I didn't want to roll in yet more CSS rules. In addition I needed support for extra things such as targeting the header with a specific CSS class on the table row and putting in first/last css classes on the items.
To achieve a first/last css on the items you do not need to extend the GridView and can use the handy rowCssClassExpression parameter.
To achieve my second objective of injecting a CSS class into the 'table thead tr' element I did have to override the renderTableHeader() method.
I strongly advise you only consider this route as a last resort because if you update the version of Yii it is conceivable that they make changes that are not backwards compatible with the renderTableHeader() method. Alternatively you could write a test case that runs your widget through a DOM checker to confirm that you only have 1 table element, 1 thead element, 1 tbody element etc...
Yii::import('zii.widgets.grid.CGridView');
class FXSGridView extends CGridView {
public $headerCssClass = 'columnHeadings';
public $itemsCssClass = 'grey';
public $rowCssClassExpression = '$this->rowCssClassFunction($row, $data);';
public $rowCssClass = array('odd','even');
public function rowCssClassFunction($row, $data) {
$classes = array();
if ($row == 0) $classes []= 'first';
if ($row == $this->dataProvider->getItemCount() - 1) $classes []= 'last';
// Do flip/flop on defined rowCssClass
if(is_array($this->rowCssClass) && !empty($this->rowCssClass)) $classes []= $this->rowCssClass[$row % count($this->rowCssClass)];
return empty($classes) ? false : implode(' ', $classes);
}
public function renderTableHeader()
{
if(!$this->hideHeader)
{
echo "<thead>\n";
if($this->filterPosition===self::FILTER_POS_HEADER)
$this->renderFilter();
echo '<tr class="' . $this->headerCssClass . ' ">' . "\n";
foreach($this->columns as $column)
$column->renderHeaderCell();
echo "</tr>\n";
if($this->filterPosition===self::FILTER_POS_BODY)
$this->renderFilter();
echo "</thead>\n";
}
else if($this->filter!==null && ($this->filterPosition===self::FILTER_POS_HEADER || $this->filterPosition===self::FILTER_POS_BODY))
{
echo "<thead>\n";
$this->renderFilter();
echo "</thead>\n";
}
}
}

Answer 2

'columns'=>array(
array(
'name'=>'id',
'header'=>'#',
'htmlOptions'=>array('style'=>'width: 50px; text-align: center;', 'class'=>'zzz'),
'headerHtmlOptions'=>array('class'=>'mytheadclass'),
),
The "headerHtmlOptions" is the one that gives a class to the thead cell of this column.

Answer 3

Unfortunately you cannot do this directly, as there is no provision for adding attributes to the header row tags (see source code).
A straightforward solution would be to subclass CGridView as e.g. MyGridView and override the renderTableHeader method to do what you need it to (add some class variables to MyGridView to let it be configurable). I have used this approach many times in similar situations.

Answer 4

If it's just simple changes you need to make, you might be able to use the generated CSS with something like:
table.admins th {border-right:none;text-align:center;}
table.admins th:first-child {text-align:left;}
etc...
or you could use the Yii-generated ids (view the generated HTML):
<th id="admins-grid_c1">
which may or may not be appropriate depending on how many grids you want to apply the css to and your own naming conventions. You could also use JavaScript/jQuery to manipulate the styles but certainly #Jon's suggestion of creating a custom renderTableHeader is going to give you the most control. (I've also used that approach with lists and renderSorter.)