This is my personal notes on Gridview and their tips.
First, I have gridview table with the following structure and content :
Next step is to create the GridviewModel model and the CRUD using Gii.
A. Gridview Tips : Dropdown Search using Kartik Gridview
The end result will be like this, there is dropdown list on status_active, if active is selected, gridview will search the active ones, and if inactive is selected, gridview will search only the inactive ones.
Step 1 : Create function getActiveStatus and getStatusActiveList on GridviewModel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
public function getActiveStatus() { switch ($this->status_active) { case '1': return Yii::t('app', 'Active'); # code... break; case '0': return Yii::t('app', 'Inactive'); # code... break; default: return $this->status_active; # code... break; } } public static function getStatusActiveList() { return [ '1'=>Yii::t('app', 'Active'), '0'=>Yii::t('app', 'Inactive'), ]; } |
Step 2 : Install kartik Gridview
|
1 |
composer require kartik-v/yii2-grid "@dev" |
Step 3 : Add gridview modules to common/config/main.php
|
1 2 3 4 5 |
'modules' => [ 'gridview' => [ 'class' => '\kartik\grid\Module' ] ], |
Step 4 : Modify views/gridview-model/index.php
|
1 2 3 4 5 6 |
[ 'class'=>'\kartik\grid\DataColumn', 'attribute'=>'status_active', 'value'=>'activeStatus', //from GridviewModel function getActiveStatus 'filter'=>Html::activeDropDownList($searchModel, 'status_active',GridviewModel::getStatusActiveList(),['class'=>'form-control','prompt' => 'All']) ], |
The end result :
B. Gridview Tips : Date Search
We are going to search by date, the end result is when the date is selected, only record with the exact date is shown.
Step 1 : The GridviewSearch.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<?php namespace common\models; use Yii; use yii\base\Model; use yii\data\ActiveDataProvider; use common\models\GridviewModel; /** * GridviewSearch represents the model behind the search form about `common\models\GridviewModel`. */ class GridviewSearch extends GridviewModel { /** * @inheritdoc */ public function rules() { return [ [['id', 'status_active'], 'integer'], [['name', 'created_date', 'established_date'], 'safe'], ]; } /** * @inheritdoc */ public function scenarios() { // bypass scenarios() implementation in the parent class return Model::scenarios(); } /** * Creates data provider instance with search query applied * * @param array $params * * @return ActiveDataProvider */ public function search($params) { $query = GridviewModel::find(); // add conditions that should always apply here $dataProvider = new ActiveDataProvider([ 'query' => $query, ]); $this->load($params); if (!$this->validate()) { // uncomment the following line if you do not want to return any records when validation fails // $query->where('0=1'); return $dataProvider; } // grid filtering conditions $query->andFilterWhere([ 'id' => $this->id, 'status_active' => $this->status_active, 'created_date' => $this->created_date, 'established_date' => $this->established_date, ]); $query->andFilterWhere(['like', 'name', $this->name]); return $dataProvider; } } |
Step 2 : Modify index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[ 'attribute' => 'established_date', 'value' => 'established_date', 'format' => 'raw', 'filter' => DatePicker::widget([ 'model' => $searchModel, 'attribute' => 'established_date', 'clientOptions' => [ 'autoclose' => true, 'format' => 'yyyy-mm-d', ], ]), ], |
Don’t forget to add :
|
1 |
use dosamigos\datepicker\DatePicker; |
The result :
C. How to align the Header and Content of a Gridview, and give HTML styling to the content
Use attribute, headerOptions, contentOptions, and value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[ 'label' => 'Document Status', 'attribute'=>'status', 'format'=>'html', 'headerOptions' => ['class'=>'text-center'], 'contentOptions' => ['class'=>'text-center'], 'value' => function($model){ if (!empty($model->report)){ $url = Yii::$app->params['hostInfo']; return '<span class="label label-warning">'.$model->report.'</span>'; } return '<span class="label label-primary">'.\common\helpers\flaghelper\Status::getStatusList()[$model->status].'</label>'; } ], |
The result would be like this :
D. Adding Preview File Button on the Gridview Content
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[ 'label' => 'Application File', 'attribute'=>'file_permohonan', 'format'=>'html', 'headerOptions' => ['class'=>'text-center'], 'contentOptions' => ['class'=>'text-center'], 'value' => function($model){ $image = ArrayHelper::getValue($model,'file_permohonan'); $file = Yii::getAlias('@frontend').'/web/permohonan-blanko/'.$image; $url = Yii::$app->params['hostInfo']; if (is_file($file)){ return Html::a('Preview', $url.'/permohonan-blanko/'.$image,[ 'class' => 'btn btn-xs btn-success lihat' ]); }else{ return '<label class="label label-warning">File doesn"t exist</label>'; } } ], |
In this example, class ‘lihat’ using jquery colorbox.
|
1 |
$('.lihat').colorbox({iframe:true,width:'100%', height:'100%'}); |
The result :
E. Adding Button to ActionColumn
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
['class' => 'yii\grid\ActionColumn', 'header'=>'Action', 'headerOptions' => ['class'=>'text-center'], 'contentOptions' => ['class'=>'text-center'], 'template' => '{ambil} {proses} {report} ', 'buttons' => [ 'ambil' => function ($url,$model,$key) { return ($model->status > 60 && $model->status < 80) ? Html::a('<span class="btn btn-warning btn-xs">Blanko Diambil</span>', $url) : ''; }, 'proses' => function ($url,$model,$key) { return $model->status < 50 ? Html::a('<span class="btn btn-success btn-xs">Proses</span>', $url) : ''; }, 'report' => function ($url,$model,$key) { return ($model->status >= 80 && $model->status < 90) ? Html::a('<i class="fa fa-pencil"></i>', $url) : ''; }, ], ], |
In this case, the ‘ambil’ and ‘proses’ button are correspond to actionAmbil, and actionProses, respectively.