Krajee yii2-grid image columns

Yii 2.0 General Discussions
1

Hello Community,

I started a Yii2 project some weeks ago and working now on a DataGrid view.

On my websearch I found the Yii2 extensions from Krajee.

Very nice work and many thanks for this.

Now I have following problem I have to solve:

I want to define in kartik\grid\DataColumn a dynamically bootstrab label or include an images depends on the value of the data column.

For example:

Value of the DataGridColumn is an ENUM("PENDING", "SUCCESS", "ERROR")

I want to show in GridView the value with the label options like:




<span class="label label-primary">PENDING</span>

<span class="label label-success">SUCCESS</span>

<span class="label label-warning">ERROR</span>

To set the label static I used:




'contentOptions' => ['class' => 'label label-success glyphicon glyphicon-ok '],

Anyone has an idea to set this dynamic?

Thank you in advanced.

Best regards,

Christian

2

Set up callback on your grid column configuration see http://www.yiiframework.com/doc-2.0/yii-grid-column.html#$content-detail and look at the $content property

3

Depends on what you mean by dynamic. The most flexible way if you do not have static values is to assign contentOptions using a Closure callback.




'contentOptions' => function ($model, $key, $index, $column) {

   // do your dynamic stuff here

}
4

Thank you very much.

Following definition of the column works for me:




['class' => 'kartik\grid\DataColumn',

    'attribute' => 'status',

    'format' => 'html',

    'value' => function($model, $key, $index, $column) { 

     switch($model->status){

      case 'PENDING':

       return Html::tag('span', $model->status, ['class' => 'label label-default glyphicon glyphicon-time ']);

       break;

      case 'SUCCESS':

       return Html::tag('span', $model->status, ['class' => 'label label-primary glyphicon glyphicon-ok ']);

       break;

      case 'ERROR':

      default:

       return Html::tag('span', $model->status, ['class' => 'label label-danger glyphicon glyphicon-remove ']);

       break;

     }

    },

   ],