Paramone
Paramone

Reputation: 2724

How to change background of 1 row in Yii2 Gridview

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.

Upvotes: 25

Views: 33957

Answers (2)

DrBorrow
DrBorrow

Reputation: 958

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

Upvotes: 11

Paramone
Paramone

Reputation: 2724

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

Upvotes: 48

Related Questions