Guía rápida para uso de widget kartik para select para formulario

En esta guía te enseñaré cómo utilizar de manera simple y rápida el widget para select de kartik

Nota: Este video tutorial de ejemplo contiene un ejemplo parecido al de éste post. 





Introducción.

Algunas veces necesitamos algunas opciones más avanzadas para algunos formularios, para esos casos puedes utilizar este pluging que al día en el que estoy escribiendo éste artículo es popular.

A continuación te muestro como utilizar éste componente en los siguientes pasos.

Paso #1. Instalación de widget.

Si aun no lo tienes instalado deberás instalarlo para poder utilizarlo, el nombre del widget es: 

    use kartik\select2\Select2;

Por lo tanto deberás incluir ésta librería dentro de tu vista.


Paso #2. Obtener arreglo con opciones que se cargarán en el menú.

Este proceso es muy simular al que se hace regularmente, sólo asegúrate de estar recibiendo en la vista el formato adecuado.

Existen varias opciones para convertir una consulta a un arreglo, algunos optan por colocar esto en un repositorio o directo en el controller, eso dependerá de tu organización dentro de tu proyecto. 

También obviamos que tienes una tabla relacionada a tu entidad del cual pertenece el CRUD y así deberás obtener tu arreglo.

También será necesario que agregues la librería en donde decidas usar la función ArrayHelper::map();

    use yii\helpers\ArrayHelper;

Para obtener los datos utiliza el nombre de tu modelo y la función "find()->all()" para obtener todos los registros de tu modelo.

        $parametroCategoria = ParametroCategoria::find()->all();                              

        return ArrayHelper::map( $parametroCategoria , 'id', 'nombre'); 

Observa que en la función Array::map( ) el segundo y tercer parámetro tiene dos nombres, 'id' y 'nombre', es importante que el primer parámetro se llame  'id' el segundo parámetro puede llamarse 'nombre' o 'name' o cualquier otro. 

Paso #3. Pasar el arreglo hasta la vista. 

Como lo mencioné en el paso anterior el arreglo debe tener un formato igual al siguiente:

 Array

(
    [1] => General
    [2] => Modulo
)

Si tiene ese formato entonces ya lo puedes pasar del controller a las vistas, si usas el método tradicional de gii seria mas o menos asi

Código dentro del controller.

Marcaré con negrita lo que normalmente tendrías que cambiar.

 return $this->render('create', [
            'model' => $model,
            'parametroCategoriaList' =>$parametroCategoriaList
 ]); Array

Código del create 


Marcaré con negrita lo que normalmente tendrías que cambiar.

    <?= $this->render('_form', [
        'model' => $model,
        'parametroCategoriaList' =>$parametroCategoriaList
    ]) ?>

Código de la vista del formulario

Copia y pega éste código cambiando los parámetros de acuerdo al nombre de tus variables. 

Marcaré con negrita lo que normalmente tendrías que cambiar.

Observa que tienes que poner el nombre del parámetro tal como lo tienes en el modelo.

Ejemplo del antes:

Así es como normalmente aparece cuando creas el crud con Gii.

 <?= $form->field($model, 'parametro_categoria_id')->textInput() ?>

Ejemplo del después:

Así debe lucir el remplazando el código anterior. 

 <?= $form->field($model, 'parametro_categoria_id')->widget(Select2::classname(), [
                        'data' => $parametroCategoriaList,
                        'options' => ['placeholder' => Yii::t('app', 'Selecciona la categoria ') . '...'],
                        'pluginOptions' => [
                            'allowClear' => true,
                        ],
                    ])
   ?> 

Recuerda que el parámetro 'data' es el que recibe el arreglo que se pasa como parámetro.

Y recuerda borrar el código anterior por que si lo dejas no funciona  el select o aparece vacío.


Finalmente deberás de ver tu select de la siguiente manera:

Paso #4. Repetir el proceso en el update

De igual manera se deben de agregar en el controller del update la obtención de los arreglo o arreglos según sea el caso.

También deberán de pasarse a la vista 'update'

        return $this->render('update', [
            'model' => $model,
            'parametroCategoriaList' => $parametroCategoriaList,
            'tipoDatoList' => $tipoDatoList
        ]);

También deberán de pasarse a la vista '_form'

    <?= $this->render('_form', [
        'model' => $model,
        'parametroCategoriaList' => $parametroCategoriaList,
        'tipoDatoList' => $tipoDatoList
    ]) ?>

Si el archivo de update es el mismo deberá de funcionar también en el 'action' 'update' por que se están pasando los parámetros de la misma manera que en el 'create'

Paso #5 Opcional. ¿Que pasa si tengo más de un select en el mismo formulario?

Podes agregar más de un select siguiendo el mismo proceso anterior, sólo deberás agrear un parámetro adicional a todos los select que tengas en el mismo controller, es decir para que puedan funcionar deberá agregar el parámetro de 'name' con un nombre diferente para cada select de manera que no se repitan.

De igual manera se tiene que pasará como parámetro adicional entre el controller y la vista los datos de origen que alimentarán el select.

Código de la vista del formulario

 <?= $form->field($model, 'parametro_categoria_id')->widget(Select2::classname(), [
                        'data' => $parametroCategoriaList,
                        'name' => 'two',
                        'options' => ['placeholder' => Yii::t('app', 'Selecciona la categoria ') . '...'],
                        'pluginOptions' => [
                            'allowClear' => true,
                        ],
                    ])
   ?> 

Actualizado: 03 de marzo de 2020


Fuente: 
http://demos.krajee.com/widget-details/select2