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
Kalau membuat DetailView menjadi modal bagaimana caranya Mas Hafid?
sma aja.. tinggal Gridview diganti Detailview
pada bagian
‘myModal’,
‘header’ => ‘Detail Surat Pesanan’,
]);
echo ‘…’;
Modal::end();
?>
nilai echonya yg dipanggil yg mana ya mas hafidz.. masih bingung..?
Itu memang kosongan.. cuman container.. tulis aja seperti itu… karena nanti isinya diambil via ajax..
saya sudah mengikuti dari awal mas.. jika tanpa modal bisa dibuka detailnya, tapi ketika menggunakan modal hanya keluar form kosong.. titlenya pun gak keluar..
apa yg salah ya mas..?
sorry mas… udah berhasil… ternyata saya naruh jsnya diluar <?php…
apakah filtering gridview berfungsi di modal? karena punya saya filteringnya tidak berfungsi
harusnya demikian juga bisa
sory gan mau tanya cara mengambil row data gridview untuk di pasing ke from gimana ya….??. modal dengan gridview sebgai pencarian jadi user tignggal pilih item datanya….
punya sy pencarian di modal ko hasilnya bukan di dalam modal ya, tapi di redirect ke halaman luar.
Tutorial yang bagus mas bro.
mantrabs mas.. thanks
lg test2 bikin sprti ini, modal brhasil dirender berikut data passingnya, namun tampilannya kacau (muncul seluruh halaman, termasuk bagian sidebar2nya)..
solusinya:
#tanpa layout
$this->layout = false;
ok
Mas, saya sudah cb ikuti tutorial di halaman ini untuk menampilkan detailview ke modal, namun modalnya hanya tampil sesaat (seperti halaman di refresh). Tombol untuk memunculkan modal, saya pake tombol actiongrid bawaan yii2, dengan memodifikasinya.
Berikut kode di gridviewnya:
‘class’ => ‘yii\grid\ActionColumn’,
‘template’ => ‘{view} {update} {delete}’,
‘buttons’ => [
‘view’ => function($url, $model){
return Html::a(
”, $url, [
// 'class' => 'btnViewModal',
'data-toggle' => 'modal', 'data-target' => '#modalView',
'data-title' => 'Detail Data']
);
},
Berikut kode di controller action view:
return $this->renderAjax(‘view’, [
'model' => $this->findModel($id),
]);
di gridview, saya buat bagian untuk modalnya:
Modal::begin([
‘header’ => ‘ Detail’,
‘id’ => ‘modalView’,
‘size’ => ‘modal-md’
]);
echo ‘…’;
Modal::end();
dan di index, saya register javascriptnya:
$(‘#modalView’).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(‘‘)
$.post(href)
.done(function( data ) {
modal.find(‘.modal-body’).html(data)
});
});
Apakah ada yg keliru dari kode-kode sy diatas, sehingga modalnya tidak mo muncul?
Terima kasih
sedikit menambahkan mas Hafid, registerJs nya harus diantara Pjax.
kalo diluar itu hanya berhasil ketika belum ada aksi ajax, tp begitu ada filter atau pindah halaman, maka js tadi tidak ikut.
Kalau update dengan modal itu gimana??