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,
]);
?>
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.
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.
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.
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'.
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
]
]
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
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' ]
],
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With