Reputation: 933
How to edit cell CSS (like background color) in gridview? Note that I only need to edit one cell not the whole column or row. Specifically, there is a column in grid view that's labelled 'colors', I want every cell's background color to be the same as the color written there.
Upvotes: 1
Views: 769
Reputation: 133380
In gridView, in every column, you can set the contentOptions
and value
paramter
this is a sample where:
for a first column you assign the color for all cell of the column,
in the the second column you can assign the color for single cell based on a color value ( in this sample the color value is provided by model) evaluated inside the function. Then composing the proper html code and render in row format you set the color you desire
<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'your_attribute',
'label' => 'your_labe',
'contentOptions' => ['style' => 'background-color: #000000;'],
],
....
....
[
'attribute' => 'your_attribute_cell',
'label' => 'your_label_cell',
'format' => 'raw',
'value' => function ($model) {
return "<span style='background-color:" . $model->yourColor "' >" . $model->your_attribute_cell. " </span>";
},
'contentOptions' => ['style' => ' text-align: center; width: 100px;'],
'headerOptions' => ['style' => 'text-align: center;'],
],
],
Upvotes: 1