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. This widgets is mostly used by developers. I added some properties for this
- Sample Category GridView
- Gridview Options
- Table Options
- Table Row Options
- Gridview Layout Format
- Gridview Summary Text, showFooter, showHeader
- Show/Hide GridView On Empty
- Fill Empty Cell By Value
- GridView Button Template And Properties
- GridView Column: Content Options [class, style etc]
- GridView Column: Add Image
- GridView Column: Add Link
- GridView Column: Data From Relational Table Or Model
- Gridview Column: Date format
- Gridview Filter : Select Box
Sample Category GridView
I generated this gridview widget using CRUD for category table in yiiframework 2.0.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'categoryid',
'categoryname',
'parentid',
'createdon',
// 'isactive',
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Gridview Options
By default the gridview ‘div’ is having the ‘grid-view’ class. If we want, we can edit this class using ‘options’.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
'options'=>['class'=>'grid-view gridview-newclass'],
]);
?>
Table Options
By default the grid view table is having the ‘table table-striped table-bordered’ class. We can change or add class, style etc using ‘tableOptions’ of gridview yiiframwork2.0
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
'tableOptions' =>['class' => 'table table-striped table-bordered'],
]);
?>
Table Row Options
We can add class, style etc for table row using ‘rowOptions’.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
'rowOptions'=>function ($model, $key, $index, $grid){
$class=$index%2?'odd':'even';
return array('key'=>$key,'index'=>$index,'class'=>$class);
},
]);
?>
Gridview Layout Format
By default, the gridview layout is containing ‘summary’,’items’,’pager’. If we want, we can add/change this layout using ‘layout’ properties of yii2.0.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'layout'=>"{sorter}\n{pager}\n{summary}\n{items}",
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Gridview Summary Text, showFooter, showHeader
Show/Hide the summary text, footer and header of gridview table yii2.0.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'summary'=>'',
'showFooter'=>true,
'showHeader' => true,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Show/Hide GridView On Empty
Hide the gridview using ‘showOnEmpty’ properties If the data is not available to show in gridview table.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showOnEmpty'=>true,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Fill Empty Cell By Value
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'emptyCell'=>'-',
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
GridView Button Template And Properties
Every developer would like to play with gridview action. I added the code for that from my experience.
Template, Header, HeaderOptions
Configure the gridview button or template, header lable value and button options like class, style etc.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'class' => 'yii\grid\ActionColumn',
'header'=>'Action',
'headerOptions' => ['width' => '80'],
'template' => '{view} {update} {delete}{link}',
],
],
]);
?>
New Button
Add the new button in gridview action template and configure the url, text, title etc.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'class' => 'yii\grid\ActionColumn',
'template' => '{view} {update} {delete} {link}',
'buttons' => [
'update' => function ($url,$model) {
return Html::a(
'<span class="glyphicon glyphicon-user"></span>',
$url);
},
'link' => function ($url,$model,$key) {
return Html::a('Action', $url);
},
],
],
],
]);
?>
GridView Column: Content Options [class, style etc]
If we would like to set the HTML attributes for ‘Gridview’ table cells in yii2.0, Just use the ‘contentOptions’ parameter for that cell. We will call one function this parameter. The function parameter should be like this ‘function ($model, $key, $index, $column){}’ and it will return the array with different type of attribute for cells like class, style, data-key, etc
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
// format one
[
'attribute'=>'parentid',
'label'=>'Parent Name',
'contentOptions' =>function ($model, $key, $index, $column){
return ['class' => 'tbl_column_name'];
},
'content'=>function($data){
return "value";
}
],
// format two
[
'attribute'=>'child_id',
'contentOptions' =>['class' => 'table_class','style'=>'display:block;'],
'content'=>function($data){
return "value";
}
],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
GridView Column: Add Image
Add Image in gridview column of yiiframwork 2.0.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'label'=>'Image',
'format'=>'raw',
'value' => function($data){
$url = "http://127.0.0.1/yii2/logo.png";
return Html::img($url,['alt'=>'yii']);
}
],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
GridView Column: Add Link
Add a link in gridview column of yiiframwork 2.0.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'label'=>'Custom Link',
'format'=>'raw',
'value' => function($data){
$url = "https://www.bsourcecode.com";
return Html::a('Go Link', $url, ['title' => 'Go']);
}
],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
GridView Column: Data From Relational Table Or Model
If you want to display a value from relational data, using the below code. We displayed value from model function and inline method.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'attribute'=>'parentid',
'label'=>'Parent Name',
'format'=>'text',//raw, html
'content'=>function($data){
return $data->getParentName();
}
],
// ***** OR *****
'parent.categoryname',
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Category Model
<?php
namespace app\models;
use Yii;
//........
class TblCategory extends \yii\db\ActiveRecord
{
.........
public function getParent()
{
return $this->hasOne(TblCategory::className(), ['categoryid' => 'parentid']);
}
public function getParentName(){
$model=$this->parent;
return $model?$model->categoryname:'';
}
..........
}
?>
Gridview Column: Date format
To display the date format in gridview Use the below code. We can set the format like ‘date’,’datetime’,’time’ etc.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'attribute'=>'createdon',
'label'=>'Created On',
'format'=>'datetime',//date,datetime, time
'headerOptions' => ['width' => '200'],
],
[
'attribute' => 'createdon',
//'format' => ['raw', 'Y-m-d H:i:s'],
'format' => ['date', 'php:Y-m-d H:i:s'],
'options' => ['width' => '200']
],
.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Gridview Filter : Select Box
By default, gridview filter is having ‘textbox’. We can change it as ‘dropdownbox’ using below code.
Format 1
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'attribute'=>'isactive',
'filter'=>array("1"=>"Active","2"=>"Inactive"),
//TblCategory::get_status(),
],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Format 2
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//.........
[
'attribute'=>'isactive',
'filter'=>TblCategoryStatus::get_status(),
],
//.........
['class' => 'yii\grid\ActionColumn'],
],
]);
?>
Get Status List From Model
//..........
public static function get_status(){
$cat = TblCategoryStatus::find()->all();
$cat = ArrayHelper::map($cat, 'id', 'name');
return $cat;
}
//.......