Yii 2 – Membuat filter Gridview menggunakan Select2

Pada artikel kali ini kita akan membahas bagaimana cara membuat filter pada Gridview Yii Framework menggunakan Select2 plugin.

Sebelum kita mulai, pastikan dulu kita memiliki extension select2 pada aplikasi kita.

Select2

Install select2 dengan menambahkan kode berikut ini pada file composer.json

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

Kemudian jalankan perintah composer update.

Table

Kita akan menggunakan 2 table sederhana untuk tutorial kali ini

Table Provinsi

Table Kabupaten

Seperti kita lihat, kabupaten memiliki relasi dengan table provinsi. Final akhirnya, kita akan membuat list daftar kabupaten dalam GridView, dan pada kolom id_kabupaten kita akan menggunakan filter select2.

Generate Gii

Langkah pertama, generate kedua model tersebut dan generate juga proses CRUD untuk model kabupaten (kita hanya akan menggunakan model kabupaten saja untuk tutorial ini).

Berikut ini adalah kode GridView hasil generate Gii untuk model kabupaten.

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'nama',
        'id_provinsi',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Kode di atas akan menghasilkan output seperti dibawah ini.

Seperti kita lihat, isi kolom id_provinsi masih menggunakan angka dan filter untuk kolom tersebut juga masih menggunakan text field. Hal ini tentu saja akan merepotkan pengguna, karena pengguna harus bisa mengetahui id yang tepat untuk melakukan filter.

GridView Filter

Untuk mengimplementasikan Select2 sebagai filter pada GridView, kita harus memodifikasi kode diatas.

Jangan lupa untuk melakukan import untuk ArrayHelper dan model Provinsi.

<?php
use yii\helpers\ArrayHelper;
use app\models\Provinsi;
?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'nama',
        [
            'attribute' => 'id_provinsi',
            'filter' => \kartik\select2\Select2::widget([
                'model' => $searchModel,
                'attribute' => 'id_provinsi',
                'data' => ArrayHelper::map(Provinsi::find()->all(), 'id', 'nama')
            ]),
        ],
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Dengan kode diatas kita telah berhasil menambahkan select2 sebagai filter pada kolom id_provinsi.

Akan tetapi rasanya masih kurang user friendly jika nilai id_provinsi masih berupa angka. Untuk itu kita perlu mendefinisikan nilai dari id_provinsi yang sesuai.

Pastikan kita memiliki relasi terhadap model Provinsi pada model Kabupaten

public function getProvinsi()
{
    return $this->hasOne(Provinsi::className(), ['id' => 'id_provinsi']);
}

Selanjutnya tambahkan attribute value pada kolom id_provinsi untuk menampilkan nama provinsi.

[
    'attribute' => 'id_provinsi',
    'value' => function($data) {
        return $data->provinsi->nama;
    },
    'filter' => \kartik\select2\Select2::widget([
        'model' => $searchModel,
        'attribute' => 'id_provinsi',
        'data' => ArrayHelper::map(Provinsi::find()->all(), 'id', 'nama')
    ]),
],

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S