5

I am new to yii2.. how to apply css to column, column heading of yii2 gridview??

<?php $gridColumns = [ ['class' => 'yii\grid\SerialColumn'], ['class' => 'yii\grid\CheckboxColumn'], 'name', 'company_mail', //change the color of heading 'no_employees', 'email:email', . . .]; echo GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => $gridColumns, ]); ?> 

3 Answers 3

8

You can set particular column style/css using this way.

$columns = [ 'onenormalcolumn', 'anothercolumn', [ 'format'=>"ntext", // or other formatter 'attribute' => 'theattributeofmodel', 'contentOptions' => ['style' => 'width:50px'], // For TD 'headerOptions' => ['class' => 'ur-class'] // For TH ] ] 
Sign up to request clarification or add additional context in comments.

Comments

1

You have to set your column in detailed mode:

<?php $columns = [ 'onenormalcolumn', 'anothercolumn', [ 'format'=>"ntext", // or other formatter 'attribute' => 'theattributeofmodel', 'options'=>[ 'style'=>'your rules here' ] ] ] ?> 

See Yii2 Gridview column options

3 Comments

I dont want to use directly .. want to give id or class... then apply style from css.. can you help??..... also i tried like this... stackoverflow.com/questions/39241292/….... but it is applying to content of table NOT to heading
Replace 'style' with 'class' in the example and set your class name as value.
'options' => [ 'class' => 'YourCustomTableClass', ], 2) Add new style rules to it (in css file): .YourCustomTableClass { color: #FF0000; }...............It is NOT changing color of column HEADING .. only changes color of table content/ ROWS
1

if you want change the column header css properties you should use headerOptions column propreties eg:

'columns' => [ ['class' => 'yii\grid\SerialColumn'], ....... 'anothercolumn', [ 'format'=>"ntext", // or other formatter 'attribute' => 'theattributeofmodel', 'headerOptions'=>[ 'style'=>'background-color:#ccf8fe' ] ], ], 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.