how to apply css to particular column of gridview columns in yii2

Question

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,
    ]); 
    ?>

Naushil Jain · Accepted Answer · 2017-10-30 11:36:57Z

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

   ]
]

answered Oct 30, 2017 at 11:36

Naushil Jain

4443 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prescol · Accepted Answer · 2017-10-28 10:20:56Z

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

answered Oct 28, 2017 at 10:20

Prescol

6275 silver badges14 bronze badges

3 Comments

Goli Over a year ago

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

Prescol Over a year ago

Replace 'style' with 'class' in the example and set your class name as value.

Goli Over a year ago

'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

ScaisEdge · Accepted Answer · 2017-10-28 11:30:39Z

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' ]
       ], 

],

answered Oct 28, 2017 at 11:30

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Collectives™ on Stack Overflow

how to apply css to particular column of gridview columns in yii2

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related