1. PHP
  2. Yii Framework

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.

Select2 Yii Framework

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

Nama KolomTipe Data
idInteger (Auto Increment)
namaVarchar (100)

Table Kabupaten

Nama KolomTipe Data
idInteger (Auto Increment)
namaVarchar (100)
id_kabupatenInteger

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.

Gridview Yii

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.

Gridview filter select2

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')
    ]),
],
GridView filter Select2
Comments to: Yii 2 – Membuat filter Gridview menggunakan Select2

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.