Yii CGridView add class or style for header cell

Question

I want to set some style or css class for header cell in specific column.

This changes css only for data cells in a column.

        'columns'=>array(
            array(
                'name'=>'id',
                'header'=>'#',
                'htmlOptions'=>array('style'=>'width: 50px; text-align: center;', 'class'=>'zzz'),
            ),

How to set css or style in header cell of this column?

Solution 1

Use headerHtmlOptions.

'columns'=>array(
        array(
            'name'=>'id',
            'header'=>'#',
            'htmlOptions'=>array('style'=>'width: 50px; text-align: center;', 'class'=>'zzz'),
            'headerHtmlOptions'=>array(...),
        ),

Solution 2

filterHtmlOptions

If you want to style the content that the user enters in the filterbox - for example "text-align : right" - then

'filterHtmlOptions'=>array('style'=>'text-align: right'),

is not going to work, because it will only style the outer table cell (td), and not the inner filter-container (div) or input element:

<td style="text-align: right;">
    <div class="filter-container">
        <input>
    </div>
</td>

What you can do is add a class to the outer table cell:

'filterHtmlOptions'=>array('class'=>'filterBoxRight'),

which will result in this:

<td class="filterBoxRight">
    <div class="filter-container">
        <input>
    </div>
</td>

Then run the following code:

$(document).on('ready', function(){
    $('.filterBoxRight').find('.filter-container').find(':input').css({
        'text-align': 'right',
    });
});

Comments

[dr0zd]

Thanks!!! I can't understand why Google didn't help me with my 'yii cgridview header htmloptions' like queries

[Bàn Chân Trần]

You can access yiiframework.com/doc/api then find class you want and all public properties... you can see it... :D

[Peon]

And one more thing, if you need to set the class/style for filter ( for me it was for responsive features ) use filterHtmlOption the exact same way.