| 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> " ;
},
Related Links
//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
{
$d = 'Text here';
$color="red";
return "<td style='background-color: {$color}'> {$d}</td> " ;
},
