Agregar select en encabezado de busqueda de un GridView

Agregar select en encabezado de búsqueda de un GridView

Escenario: Tenemos un listado de tipo GridView y queremos filtrar dicho listado, una opción muy útil es utilizar en el encabezado un select.


 

A continuación explico como podemos agregar un select como encabezado de columna dentro de un GridView, con ayuda de los componentes de karkit.

Paso #1 Revisar si tenemos instalado kartik\grid\GridView

Revisar si se tiene instalado el siguiente componente componente, la manera más rápida de saber si está instalado es incluyendo la librería en la vista de la siguiente manera.

use kartik\grid\GridView;

Si sale un mensaje de error, significará que probablemente no está instalado, para instalarlo puedes ir a este link;  http://demos.krajee.com/grid 

ó puede instalarlo de la siguiente manera.

Busque su archivo "composer.json" y abralo, identifique la sección llamada "require-dev", donde se encuentra la lista de componentes instalados, y agregue las siguientes líneas:

  "require-dev": {
     ....
        "kartik-v/yii2-grid": "@dev",
        "kartik-v/yii2-krajee-base": "@dev"
    .....
   }

A continuación actualice su composer mediante el comando:

  composer update  

El proceso puede tardar algunos minutos. 

Una vez instalado deberá agregar el módulo en el archivo de configuración "/config/web.php".

Agregue el siguiente modulo. Recuerde que los módulos están dentro del mismo nivel jerárquico que "components" por lo que si es su primer componente que instala deberá escribirlo en el mismo nivel como el siguiente ejemplo:

  'components' => [
   .....
   // Aqui todos sus componentes
   .....
   ],
    'modules' => [
            'gridview' => [
            'class' => '\kartik\grid\Module',
             // enter optional module parameters below - only if you need to  
            // use your own export download action or custom translation 
            // message source
            // 'downloadAction' => 'gridview/export/download',
            // 'i18n' => []
            //'bsVersion' => '4'
            ]
    ],

    'params' => $params,

Si hay más de un componente entonces debe agregarlo como un elemento más de "modules".

Las otras opciones de 'gridview' le recomendamos dejarlas así por el momento, son opciones que posteriormente podría ocupar pero por el momento y para fines de éste tutorial no se utilizan.


Una vez instalado ir al siguiente paso.

Paso #2 Cargar el select las opciones que se mostrarán dentro del select.

El select que deseamos cargar deberá de ser cargado mediante un arreglo, en este caso puede ser cargado dentro del 'Controller' que está renderizando nuestra vista, en este caso tenemos una tabla llamado "permiso_estatus" y su Modelo se llama "FormatoSolicitud", así que con esta línea cargamos como arreglo la lista que se va a desplegar en nuestro select.

  public function actionIndex() {
        $searchModel = new PermisoConstruccionSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        $permisoStatus = PermisoEstatus::find()->select(['id', 'nombre'])->asArray()->all();  //Devuelve el arreglo que contiene la lista de estatus para filtrar      
        return $this->render('index', [
                    'searchModel' => $searchModel,
                    'dataProvider' => $dataProvider,
                    'permisoStatus' => $permisoStatus // Pasamos los datos de la tabla como arreglo
        ]);

    }

Error común:

Asegúrate de que el arreglo que mandes sea un arreglo bidimensional y no un objeto y que contenga el ID y un nombre.


Paso #3 Agregar al Modelo de búsqueda 

Buscar el modelo search, en un caso normal si generas los modelos con "gii" se genera de manera automática un "Model Search", si no lo tienes deberás generarlo con "gii", normalmente encontrarás un archivo con la terminación "..Search.php"

Si ya lo tienes deberás modificarlo de la siguiente manera:

En nuestro caso el modelo se llama "PermisoConstruccionSearch.php".


Agregamos como un método público el nombre del campo el cual queremos ligar, en este caso lo llamaremos "estatus" ya que es un estatus del modelo "PermisoConstruccion" pero lo puedes llamar como tu quieras.
    

public $estatus;

Recuerda que los métodos públicos van siempre por estandar después del nombre de definición de nuestra clase "PermisoConstruccionSearch.php" y en tu caso el nombre de tu clase. 

A continuación buscaremos el método "search()" y dentro del método encontrarás la linea donde se encuentra la búsqueda principal del modelo, en este caso es la siguiente línea:

$query = PermisoConstruccion::find();

Y le agregaremos un salto o "join" con la tabla de la base de datos, que en este caso es el filtro que deseamos utilizar, con este cambio se agrega de manera permanente en nuestro modelo de búsqueda in "Join" para que esté dentro del listado. 

$query = PermisoConstruccion::find()
->joinWith(['permisoEstatus']);

Si aun no sabes cómo hacer uniones te recomiendo éste artículo de: Las uniones utilizando Active Record.

Nota importánte: Es muy importánte que se agreguen todas las relaciones ó joins que se van a ocupar dentro del gridview por que si no se agreguan se creará una sobrecarga en el número de Queries que se ejecuten y puede provocar incluso un error de sobrecarga en el servidor.

En el método rules() de la clase  "PermisoConstruccionSearch.php", y en tu caso tu clase que uses, vamos a agregar el nombre de la propiedad que agregamos como método público anteriormente en este caso es "estatus", observa que lo puse en negritas, todo lo demás dentro del método de rules se queda igual.

   public function rules()
    {
        return [
            [['id', 'usuario_id', 'lote_id', 'permiso_estatus_id', 'formato_solicitud_id'], 'integer'],
            [['descripcion', 'fecha_solicitud', 'fecha_aprobacion', 'archivo','estatus'], 'safe'],
        ];


    }

En las consultas que utilizan el método "andFilterWhere" y que usan "like" agregaremos esta linea. 

$query ->
andFilterWhere( [ 'like' , 'permiso_estatus.nombre' , $this->estatus ] );

Algo que podría confundirte, como veras dentro del arreglo que se pasa en el método "andFilterWhere()" el primer parámetro es la palabra reservada de SQL "like" (Esa no cambia nunca), el segundo parámetro es el nombre del campo con el cual va a realizar la búsqueda, y en este caso y por una razón desconocida aun, no puedo usar el nombre del modelo, solo puedo utilizar el nombre de la tabla así como esta guardada físicamente 'permiso_estatus.nombre'

El tercer parámetro es el nombre del método que dimos de alta para este caso se llama "$this->estatus" en tu caso será el nombre que utilizaste. 

Guardamos los cambios de la clase search.

Paso #4 Agregar la columna a la vista

En este paso vamos a hacer que el select sea visible dentro del Gridview una vez que hemos terminado los pasos anteriores.

Deberás agregar dentro de la vista la siguiente librería

use yii\helpers\ArrayHelper; // Esta librería es para manejo de arreglos

Agregue las siguientes líneas dentro de las columnas del DataGrid donde vamos aplicar el filtro, como se muestra a continuación se explica a detalle, observe que solo mostramos la columna que deseamos mostrar.




Ejemplo:

  echo    GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
        'columns' => [

            .........

            [
                'attribute' => 'permiso_estatus_id', // Debe llamarse igual a la llave foránea  
                'value' => 'permisoEstatus.nombre', // Se deberá de colocar el nombre del campo con el cual se filtrará, puede usarse el mismo nombre de acuerdo al modelo
                'filterType' => GridView::FILTER_SELECT2, //No cambia dejarlo tal cual
                'filter' => ArrayHelper::map($permisoStatus, 'id', 'nombre'), //Se debe de mapear el arreglo
                'filterWidgetOptions' =>[
                    'pluginOptions' => [ 'allowClear' => true ],
                ],
                'filterInputOptions' => [ 'placeholder' =>  'Estatus Solicitud' ], // Si así lo desea puedes agregar un place holder
            ], 
  ........
 ]
]);

La siguiente línea debes colocar el nombre de la llave foránea es decil el nombre del campo que relaciona la tabla principal del Grid con el filtro que estás implementando. 

 'attribute' => 'permiso_estatus_id', 

La siguiente línea puedes usar el nombre de la relación del modelo, ejemplo en este caso la relación de modelo se llama 'permisoEstatus' esta relación la puedes encontrar en tu modelo principal, y a continuación poner un punto y el nombre del campo que deseas que se muestre en el grid, debes considerar en mostrar el mismo campo que utilizas para cargar en el select del encabezado. 

 'value' => 'permisoEstatus.nombre', 

La siguiente línea no cambia y forma parte de pluging de kartik.

'filterType' => GridView::FILTER_SELECT2, 

La siguiente línea es donde pasamos el arreglo que recibimos desde el controller, y tiene 3 parámetros, el primero es un arreglo con los datos que se muestran en el select, el segundo siempre debe ser el ID del modelo y el tercer parámetro es el nombre del campo que se muestra en el select.

  'filter' => ArrayHelper::map($permisoStatus, 'id', 'nombre'),

La siguientes líneas  son para agregar opciones adicionales del filtro, en este caso se agrega una opción para que se permite limpiar cuando se realiza la búsqueda.

'filterWidgetOptions' =>[

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

 ],

La siguiente es para agregar un 'placeholder'.

'filterInputOptions' => [ 'placeholder' =>  'Estatus Solicitud' ], 

Agradezco sus comentarios. 

Ultima actualización: 01 de Septiembre de 2023

REFERENCIAS:

Documentación del autor: http://demos.krajee.com/grid
GitHub: https://github.com/kartik-v/yii2-grid
Wiki Yii2: https://www.yiiframework.com/wiki/653/displaying-sorting-and-filtering-model-relations-on-a-gridview