Cómo personalizar nombres de columnas de gridview

Cómo personalizar nombres de columnas de gridview

Después de crear un gridview o listado con Yii2, por default todos los campos que provienen de una tabla foránea se muestra el id de dicha tabla, en muchos casos deseamos mostrar no el id, en su lugar deseamos mostrar el nombre del campo que se relaciona con esa tabla. 

Pondremos como ejemplo este gridview.

                    <?=
                    GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'columns' => [
                            ['class' => 'yii\grid\SerialColumn'],
                            'id',
                            'tipo_log_id',
                            'servidor_id',
                            'fecha',
                            'origen',
                            'proceso',
                            'detalle:ntext',
                            'creado',
                            ['class' => 'yii\grid\ActionColumn'],
                        ],
                    ]);
                    ?>

Observa que en la propiedad llamada "column" viene una lista de campos que gii genera por default, éstos campos que terminan con "id" muestran sólo los ids de las tablas que se relacionan por una llave foránea, para sustituirlos por el nombre del campo relacionado deberá de realizar lo siguiente. 

Paso 1.- Conocer cómo trabajan las columnas

Es fundamental conocer que en Yii2 cada columna de un datagrid puede ser configurado de varias manera, una de ellas es extendiendo opciones a través de un arreglo, es decir agregar más opciones a través de un arreglo de la siguiente manera: 

                    <?=
                    GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'columns' => [
                            ['class' => 'yii\grid\SerialColumn'],
                            'id',
                            //'tipo_log_id',
                            [
                                'label' => 'Ejemplo Label',
                                'value' => 'tipo_log_id'
                            ],
                            'servidor_id',
                            'fecha',
                            'origen',
                            'proceso',
                            'detalle:ntext',
                            'creado',
                            ['class' => 'yii\grid\ActionColumn'],
                        ],
                    ]);
                    ?>

Observe que el código que está de otro color, muestra la misma funcionalidad pero con 2 opciones adicionales, la primera es que estamos proporcionando un nombre especial a la columna, y las segunda es que estamos personalizando al mismo tiempo el valor que deseamos que aparezca con la opción "value".

Una vez sabiendo esto podemos agregar algunas opciones adicionales a cada columna. 

Paso 2.- Identifique el modelo correspondiente que se relaciona a dicho ID.

Por ejemplo en mi caso tengo una modelo que se llama "Log" el cual se relaciona a través del la llave foránea a un modelo llamado 'TipoLog', entonces tenemos que ir al modelo principal con el cual estamos trabajando que en mi caso se llama "/models/Log.php" y ver el nombre de la relación que comúnmente se encuentra en los comentarios que genera gii, como se muestra en otro color.

<?php

namespace app\models;

use Yii;

/**
 * This is the model class for table "log".
 *
 * @property int $id
 * @property int $tipo_log_id
 * @property int $servidor_id
 * @property string|null $fecha
 * @property string|null $origen
 * @property string|null $proceso
 * @property string|null $detalle
 * @property string $creado
 *
 * @property Servidor $servidor
 * @property TipoLog $tipoLog
 */
class Log extends \yii\db\ActiveRecord
{
    /**
     * {@inheritdoc}
     */
    public static function tableName()
    {
        return 'log';
    }

El nombre de la relación se llama "TipoLog" en tu caso debes identificar cual es la relación, ésta relación es la que vas a colocar seguido de un punto más el nombre del campo que deseas mostrar como lo muestra la siguiente ejemplo. 

                    <?=
                    GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'columns' => [
                            ['class' => 'yii\grid\SerialColumn'],
                            'id',
                            //'tipo_log_id',
                            [
                                'label' => 'Tipo log',
                                'value' => 'tipoLog.nombre'
                            ],
                            'servidor_id',
                            'fecha',
                            'origen',
                            'proceso',
                            'detalle:ntext',
                            'creado',
                            ['class' => 'yii\grid\ActionColumn'],
                        ],
                    ]);
                    ?>

Con esto se mostraría el nombre del campo relacionado como lo muestra el siguiente ejemplo.