Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change background of 1 row in Yii2 Gridview

Tags:

I'm working with Yii 2, and it's grid view to show information.

Now, my problem is that whenever a user scans two identical serial numbers and/or mac addresses, it should highlight the row (change color to red), and show some error sign or whatever.

Screenshot: Current Grid View

What I want it to look like:

Desired Grid Highlighting

I'm new to Yii2 and don't exactly know how they do it with the grid view. I've been researching on this specific problem but couldn't find anything.

Code for Gridview

 <?= GridView::widget([     'id' => 'scan-batch-grid',     'dataProvider' => $dataProvider,     'columns' => [         ['class' => 'yii\grid\SerialColumn'],         ['class' => 'yii\grid\CheckboxColumn'],         [             'attribute' => 'product_ID',             'value' => 'product.name'         ],         'SN',         'MAC',         [             'class' => 'yii\grid\ActionColumn',             'urlCreator' => function ($action, $model, $key, $index) {                     return Url::to(['scan-batch/view',  'id' => $key, 'scan' => $model->scan_batch_ID]);             },             'buttons' => [                 'update' => function ($url, $model, $key) {                     return '';                 },                 'delete' => function ($url, $model, $key) {                     return '';                 },             ],         ],     ], ]); ?> 

EDIT

I only want to know how to change the color of only one row.

like image 530
Paramone Avatar asked Apr 20 '15 10:04

Paramone


2 Answers

Got it!

Yii2 : Adding Classes to Rows in the GridView (YouTube)

Yii2 Gridview row by row css expression

Simply add rowOptions to your gridview.

<?= GridView::widget([     'id' => 'scan-batch-grid',     'dataProvider' => $dataProvider,     'rowOptions'=>function($model){             if($a == $b){                 return ['class' => 'danger'];             }     }, 
like image 105
Paramone Avatar answered Sep 24 '22 15:09

Paramone


Thanks for posting your answer Paramone. Worked great.

Here is my implementation:

    <?= GridView::widget([     'dataProvider' => $dataProvider,     'rowOptions' => function ($model) {         if ($model->name == 'test') {             return ['class' => 'info'];         }     }, 
like image 29
DrBorrow Avatar answered Sep 24 '22 15:09

DrBorrow