dixonstarter/yii2-toggle-column

yii2 toggle column for update in gridview

Yii2 Toggle Column

yii2 toggle column for update in gridview, _(*1)

, _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

php composer.phar require --prefer-dist dixonstarter/yii2-toggle-column "*"

or add, _(*5)

"dixonstarter/yii2-toggle-column": "*"

to the require section of your composer.json file., _(*6)

Usage

GridView

use yii\grid\GridView;
use yii\widgets\Pjax;

//.....


= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'tableOptions'=>['class'=>'table table-hover'],
    'columns' => [

      //.....
      [
        'attribute'=>'status',
        'class'=>'\dixonstarter\togglecolumn\ToggleColumn'
      ],
    ],
]); ?>

Controller

Add action for update, _(*7)

class PostController extends Controller
{

    public function actions(){
      return [

          //.....

          'toggle-update'=>[
              'class'=>'\dixonstarter\togglecolumn\actions\ToggleAction',
              'modelClass'=>Post::className()
          ]
      ];
    }

    //...

}

Model

class Post extends \yii\db\ActiveRecord implements \dixonstarter\togglecolumn\ToggleActionInterface
{

  // ....

  use \dixonstarter\togglecolumn\ToggleActionTrait;
  public function getToggleItems()
  {
    // custom array for toggle update
    return  [
      'on' => ['value'=>1, 'label'=>'Publish'],
      'off' => ['value'=>0, 'label'=>'Panding'],
    ];
  }
}

Custom link style

Clean

, _(*8)

    [
      'attribute'=>'status',
      'class'=>'\dixonstarter\togglecolumn\ToggleColumn',
      'options'=>['style'=>'width:50px;'],
      'linkTemplateOn'=>'<a class="toggle-column" data-pjax="0" href="{url}">{label}</a>',
      'linkTemplateOff'=>'<a class="toggle-column" data-pjax="0" href="{url}">{label}</a>'
    ],

Button

, _(*9)

  [
    'attribute'=>'status',
    'class'=>'\dixonstarter\togglecolumn\ToggleColumn',
    'options'=>['style'=>'width:50px;'],
    'linkTemplateOn'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}">{label}</a>',
    'linkTemplateOff'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}">{label}</a>'
  ],

Icon

, _(*10)

[
  'attribute'=>'status',
  'class'=>'\dixonstarter\togglecolumn\ToggleColumn',
  'options'=>['style'=>'width:50px;'],
  'linkTemplateOn'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-ok"></i> </a>',
  'linkTemplateOff'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-remove"></i> </a>'
],

Icon Color

, _(*11)

[
  'attribute'=>'status',
  'class'=>'\dixonstarter\togglecolumn\ToggleColumn',
  'options'=>['style'=>'width:50px;'],
  'linkTemplateOn'=>'<a class="toggle-column btn btn-warning btn-xs " data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-ok"></i> </a>',
  'linkTemplateOff'=>'<a class="toggle-column btn btn-default btn-xs " data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-remove"></i> </a>'
],

Icon & Label

, _(*12)

[
  'attribute'=>'status',
  'class'=>'\dixonstarter\togglecolumn\ToggleColumn',
  'options'=>['style'=>'width:50px;'],
  'linkTemplateOn'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-ok"></i> {label}</a>',
  'linkTemplateOff'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-remove"></i> {label}</a>'
],

Icon & Button color

, _(*13)

[
  'attribute'=>'status',
  'class'=>'\dixonstarter\togglecolumn\ToggleColumn',
  'options'=>['style'=>'width:50px;'],
  'linkTemplateOn'=>'<a class="toggle-column btn btn-primary btn-xs btn-block" data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-ok"></i> {label}</a>',
  'linkTemplateOff'=>'<a class="toggle-column btn btn-default btn-xs btn-block" data-pjax="0" href="{url}"><i  class="glyphicon glyphicon-remove"></i> {label}</a>'
],