Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

gridview

yii2

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,
    ]); 
    ?>
like image 441
Goli Avatar asked Oct 28 '17 09:10

Goli


People also ask

How to set HTML attributes for'GridView'table cells in yii2?

Configure the gridview button or template, header lable value and button options like class, style etc. Add the new button in gridview action template and configure the url, text, title etc. If we would like to set the HTML attributes for 'Gridview' table cells in yii2.0, Just use the 'contentOptions' parameter for that cell.

What is GridView in yiiframework 2?

Yii Framework 2 : Gridview. In yiiframework 2.0, The gridview widget is used to display the data like image, text, etc in a grid. It is having a lot features like sorting, pagination, filtering, styling etc. This widgets is mostly used by developers.

How to show/hide the summary text of GridView table in yii2?

Show/Hide the summary text, footer and header of gridview table yii2.0. Hide the gridview using 'showOnEmpty' properties If the data is not available to show in gridview table. Every developer would like to play with gridview action. I added the code for that from my experience.

How to change class/style/row options in GridView?

By default the grid view table is having the 'table table-striped table-bordered' class. We can change or add class, style etc using 'tableOptions' of gridview yiiframwork2.0 We can add class, style etc for table row using 'rowOptions'. By default, the gridview layout is containing 'summary','items','pager'.


Video Answer


3 Answers

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

   ]
]
like image 112
Naushil Jain Avatar answered Oct 12 '22 20:10

Naushil Jain


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

like image 31
Prescol Avatar answered Oct 12 '22 19:10

Prescol


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

],
like image 1
ScaisEdge Avatar answered Oct 12 '22 19:10

ScaisEdge