Vista de Usuarios (Parte 3) Select 2 de Kartik

Les muestro como instalar el Select2 de Kartik e implementarlo en la vista de usuarios tanto en el formulario como el GridView, para el campo status que define si el usuario se encuentra activo o inactivo. 

1.- En el composer.json añadir en el require:

"kartik-v/yii2-widget-select2": "dev-master"

2.-Ejecutar en el cmd de la carpeta del proyecto:

composer update --prefer-dist

3.- Adicionar en la parte superior del formulario donde deseamos el select2

use kartik\select2\Select2;

4.- Crear el método en el modelo para obtener el array 

public function getStatusArray(){

  $array = [10=>Yii::t('app', 'Active'),9=>Yii::t('app', 'Inactive')];

  return $array;

}

5.-  Configurar el select2 en el formulario:

<?=  $form->field($model, 'status')->widget(Select2::classname(), [

    'data' => $model->getStatusArray(),

    'options' => ['placeholder' => Yii::t('app', 'Select...')],

    'pluginOptions' => [

        'allowClear' => true

    ],

]);

     ?>

6.- Añadir las traducciones al archivo app:

        'Select...' => 'Seleccione...',

        'Active' => 'Activo',

        'Inactive' => 'Inactivo',

5.- Definir un tema para que muestre la x de deseleccionar:

'theme' => Select2::THEME_BOOTSTRAP,

'size' => Select2::LARGE,

<?=  $form->field($model, 'status')->widget(Select2::classname(), [

    'data' => $model->getStatusArray(),

    'theme' => Select2::THEME_BOOTSTRAP,

     'size' => Select2::LARGE,

    'options' => ['placeholder' => Yii::t('app', 'Select...')],

    'pluginOptions' => [

        'allowClear' => true

    ],

]);

     ?>

6.- Crear un método para obtener el valor del array para la columna:

public function getStatusValue()

{

    $value = "";

    if(array_key_exists($this->status, $this->getStatusArray())){

        $value = $this->getStatusArray()[$this->status];

    }

    

    return $value;

} 

7.- Añadir ese método al value del column en el GridView

 'value' => 'statusValue',

8.- Agregar en el index:

use kartik\select2\Select2; 

8.- Agregar el filtro select2 en el column del GridView:

'filterType' => GridView::FILTER_SELECT2,

            'filter' => $model->getStatusArray(),

             'filterInputOptions' => [

                       'id' => 'status',

                    ],

            'filterWidgetOptions' => [

                'theme' => Select2::THEME_BOOTSTRAP,

                'pluginOptions' => ['allowClear' => true,],

                'options' => ['placeholder' => Yii::t('app', 'Select...')

                ],

            ],

9.- Agregar el $model de User para llamar al método del array:

use frontend\modules\user\models\User\User;

$model = new User;

10.- Añadir el pjax en el gridview y ver la diferencia:

 'pjax'=>true,

11.- Añadir el pjax vacío al botón para evitar el reload en el grid:

'data-pjax' => 0

12.- Revisar toda la documentación del widget en:

https://demos.krajee.com/widget-details/select2

Pueden ver el proceso completo en mi canal de YouTube: https://youtu.be/kRy_AF9zl9I