Yii2: Show Gridview Detail Data in a Twitter Bootstrap Modal

Sebelumnya saya menulis artikel tentang bagaimana menampilkan detail data secara inline pada Gridview, yang bisa Anda lihat disini http://www.hafidmukhlasin.com/2014/12/11/yii2-show-inline-detail-rows-in-gridview-with-ajax-without-extension/
Jika tutorial tersebut sudah Anda kuasi maka seharusnya Anda bisa melakukan tutorial ini, karena lebih mudah. Yaitu bagaimana menampilkan detail data pada sebuah modal.

1) Untuk menyamakan persepsi, asumsinya kita punya dua buah tabel..
tb_group
========
id
name

tb_employee
===========
id
name
group_id

2) Generate Models dan CRUD untuk 2 tabel ini.. via Gii..

3) Sekarang kita fokus ke CRUD tb_group, dimana pada view/index saya menambahkan kolom jumlah employee.
Lihat gambar berikut

Untuk melakukannya saya membuat seperti ini.

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

        //'id',
        'name',
        [
            'header' => 'Jumlah Employee',  
            'format'=>'raw',
            'value' => function ($data){
                $count = \app\models\Employee::find()
                    ->where([
                        'group_id'=>$data->id,
                    ])
                    ->count();

                if(!empty($count)){
                    return  $count;
                }
                else{
                    return "-";
                }
            }
        ],

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

4) Nah ketika jumlah employee di klik maka akan muncul modal yang berisi nama2 employee pada group tersebut..
simple bukan?

5) Caranya.. bikin action baru(misal actionDetail) pada controller Group.. kodenya kopas aja dari EmployeeController action index

public function actionDetail($group_id)
{
    $searchModel = new EmployeeSearch([
    	'group_id' => $group_id  // Tambahkan ini
    ]);
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    return $this->render('detail', [  // ubah ini
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
    ]);
}

Jangan lupa sertakan use app\models\EmployeeSearch;

6) Buat view detail.. pada view\group\detail.php dengan mengcopy file index.php pada view\employee\index.php
lalu hapus bagaian2 yang gak perlu

<?php
use yii\helpers\Html;
use yii\grid\GridView;
$this->title = 'Employees';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="employee-index">
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'name',
            'group_id',
        ],
    ]); ?>
</div>

7) Buatlah link pada Gridview di view\group\index.php yang menunjuk ke view\group\detail.php

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

        //'id',
        'name',
        [
            'header' => 'Jumlah Employee',  
            'format'=>'raw',
            'value' => function ($data){
                $count = \app\models\Employee::find()
                    ->where([
                        'group_id'=>$data->id,
                    ])
                    ->count();

                if(!empty($count)){
                    return  Html::a($count,['detail','group_id'=>$data->id]); // ubah ini
                }
                else{
                    return "-";
                }
            }
        ],

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

8) Silahkan ditesting jika OK maka boleh dilanjut.. jika error maka cek lagi..
Disini kita telah membuat detail data namun ditampilkan pada halaman yang berbeda

9) Tambahkan widget twitter bootstrap modal pada view\group\index.php dibagian bawah..

<?php
Modal::begin([
    'id' => 'myModal',
    'header' => '<h4 class="modal-title">...</h4>',
]);

echo '...';

Modal::end();
?>

Jangan lupa
use yii\bootstrap\Modal;

Edit link di Gridview agar ketika di klik memicu modal muncul..

return  Html::a($count,['detail','group_id'=>$data->id],[
													'data-toggle'=>"modal",
													'data-target'=>"#myModal",
													'data-title'=>"Detail Data",
													]); // ubah ini

poinnya ada disini
‘data-toggle’=>”modal”,’data-target’=>”#myModal”,
Kok begitu?? silahkan baca2 Twitter Bootstrap http://getbootstrap.com/javascript/#modals
Silahkan ditest dulu.., jika ok maka boleh lanjut..

10) Masih pada view\group\index.php tambahkan kode javascript untuk mengoveride fungsi jquery pemanggil modal.. baiknya baca2 Twitter Bootstrap

$this->registerJs("
	$('#myModal').on('show.bs.modal', function (event) {
		var button = $(event.relatedTarget)
		var modal = $(this)
		var title = button.data('title') 
		var href = button.attr('href') 
		modal.find('.modal-title').html(title)
		modal.find('.modal-body').html('<i class=\"fa fa-spinner fa-spin\"></i>')
		$.post(href)
			.done(function( data ) {
				modal.find('.modal-body').html(data)
			});
		})
");

Baca lagi dan pahami.. ini simple kok

11) modifikasi actionDetail pada controller Group.. ubah render menjadi renderAjax.. yuhu karena load di modals

return $this->renderAjax('detail', [
    'searchModel' => $searchModel,
    'dataProvider' => $dataProvider,
]);

Selesai.. silahkan dikembangkan sendiri yak.. mudahkan?? yap ini karena pake Yii2 bukan Yii1..

CMIIW