Monday 25 April 2016

Yii2 Grid View Operations

INDEX
Adding Classes to Rows in the GridView
Grid view action column change
Yii2 Gridview merge two columns
Yii2 Gridview change column background and text color

Gridview In Yiiframework 2.0

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.

Adding Classes to Rows in the GridView

Yii2 Gridview row by row css expression

Dynamically change GridView Row Background Color based on condition

<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,

//Check conditions and add to row color in gridview.
'rowOptions' => function ($model){
if($model->status == 0){
return ['class' => 'danger'];
}else{
return ['class' => 'success'];
}
},

'columns' => [
[
'header' =>'Sl.No',
'class' => 'yii\grid\SerialColumn',
'options' => ['width' => '50']
],
'eid',
[
'attribute' => 'expence_date',
'format' => ['date', 'php:d-m-Y'],
'options' => ['width' => '150'],
],
'pay_to',
'description',
[
'attribute'=>'head',
'content' => function($data){
return Groupitems::getGroupitems($data->head);
}
],
'amount',
[
'class' => 'yii\grid\ActionColumn',
'contentOptions' => ['style' => 'width:60px;'],
'header'=>'Actions',
],
],
]); ?>

Output of above script

Grid view action column change

How to change view, update and delete url on action column in yii2

[
          'class' => 'yii\grid\ActionColumn',
          'header' => 'Actions',
          'headerOptions' => ['style' => 'color:#337ab7'],
          'template' => '{view}{update}{delete}',
          'buttons' => [
            'view' => function ($url, $model) {
                return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url, [
                            'title' => Yii::t('app', 'lead-view'),
                ]);
            },

            'update' => function ($url, $model) {
                return Html::a('<span class="glyphicon glyphicon-pencil"></span>', $url, [
                            'title' => Yii::t('app', 'lead-update'),
                ]);
            },
            'delete' => function ($url, $model) {
                return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, [
                            'title' => Yii::t('app', 'lead-delete'),
                ]);
            }

          ],
          'urlCreator' => function ($action, $model, $key, $index) {
            if ($action === 'view') {
                $url ='index.php?r=client-login/lead-view&id='.$model->id;
                return $url;
            }

            if ($action === 'update') {
                $url ='index.php?r=client-login/lead-update&id='.$model->id;
                return $url;
            }
            if ($action === 'delete') {
                $url ='index.php?r=client-login/lead-delete&id='.$model->id;
                return $url;
            }

          }
          ],

Example 1

I want to gridview action column only show edit and view button and change to url.

Gridview code here

<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [

....
.....

[
'class' => 'yii\grid\ActionColumn',
'header' => 'Actions',
'headerOptions' => ['style' => 'color:#337ab7'],
'template' => '{view}{update}',
'buttons' => [
'view' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url, [
'title' => Yii::t('app', 'view-student'),
]);
},

'update' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-pencil"></span>', $url, [
'title' => Yii::t('app', 'update-register number'),
]);
},


],

'urlCreator' => function ($action, $model, $key, $index) {
if ($action === 'view') {
$url = 'index.php?r=master/students/view&ccid='.$model->ccid.'&admission_number='.$model->admission_number;
return $url;
}

if ($action === 'update') {
$url = 'index.php?r=master/students/addregisternochange&ccid='.$model->ccid.'&admission_number='.$model->admission_number;
return $url;
}

}
],


],

]); ?>

Example 1

This example gridview to show only view and edit without change url.

[
'class' => 'yii\grid\ActionColumn',
'contentOptions' => ['style' => 'width:50px;'],
'header'=>'Actions',
'template' => '{view} {update}',
],

Yii2 Gridview merge two columns

//add columns in gridview

[

'label'=>'Rem/TotFee',

'value' => function($model) { return $model->remitted_fee.'/'.$model->total_fee ;}

Yii2 Gridview change column background and text color

Text colur

[
'attribute'=>'student_name',
'contentOptions' => function ($model, $key, $index, $column) {
if($model->employee_teachersid)
return ['style' => 'color:green'];
else
return ['style' => 'color:black'];
}
],

Background color

[
'label'=>'Rem/TotFee',
'value'=> function($data)
{
return $data->remitted_fee.'/'.$data->total_fee;
},

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

if($model->remitted_fee < $model->total_fee){
return ['style' => 'background-color:red'];
}else{
return ['style' => 'background-color:lime'];
}

},
'format' => 'raw'
],

Gridview column text with badge

[
        'attribute'=>'color',
        'value'=>function ($model, $key, $index, $widget) {
            return "<span class='badge' style='background-color: {$model->color}'> </span>  <code>" . 
                $model->color . '</code>';
        },
        'filterType'=>GridView::FILTER_COLOR,
        'vAlign'=>'middle',
        'format'=>'raw',
        'width'=>'150px',
        'noWrap'=>true
    ],

Grid view column color with value

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

$d = 'Text here';
$color="red";
return "<td style='background-color: {$color}'> {$d}</td> " ;

},

Improve Your Coding Skills

Menus