Modal pop up in grid view in yii2
I am going to show you how to implement Gridview with popup.
Insert this code your header section.
use yii\helpers\Url;
use yii\bootstrap\Modal;
Define modal and Register this JS into you'r index file
Add Modal code above GridView code.
<?php
Modal::begin([
'id' => 'myModal',
'header' => '<h4 class="modal-title">...</h4>',
]);
echo '...';
Modal::end();
?>
And than register JavaScript at top or bottom of view page.
$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)
});
})
");
Insert code into gridview column section
return Html::a($count,['detail','group_id'=>$data->id],[
'data-toggle'=>"modal",
'data-target'=>"#myModal",
'data-title'=>"Detail Data",
]);
Inset code into your controller
return $this->renderAjax('detail', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
Example
Index file
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use backend\modules\tools\models\Groupitems;
use yii\helpers\ArrayHelper;
use backend\modules\tools\models\Center;
use dosamigos\datepicker\DatePicker;
use dosamigos\datepicker\DateRangePicker;
use backend\modules\tools\models\Batch;
use yii\helpers\Url;
use yii\bootstrap\Modal;
$this->title = 'Search Students';
$this->params['breadcrumbs'][] = $this->title;
?>
<?php
Modal::begin([
'id' => 'myModal',
'header' => '<h4 class="modal-title">...</h4>',
]);
echo '...';
Modal::end();
$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)
});
})
");
?>
<?php
function getCenter(){
$ccid = Yii::$app->user->identity->ccid;
if(yii::$app->user->can('z-access-all-centers-report'))
{
$x=center::find()->where(['status'=>1])->select(['ccid','subcenter'])->all();
$y=ArrayHelper::map($x,'ccid','subcenter');
//$y[null]='Select All';
return $y;
}
else {
return ArrayHelper::map(center::find()->where(['status'=>1,'ccid'=>$ccid])->all(),'ccid','subcenter');
}
}
?>
<div class="col-xs-12">
<div class="col-lg-8 col-sm-8 col-xs-12 no-padding edusecArLangCss"><h3 class="box-title"><i class="fa fa-th-list"></i> Manage Students</h3></div>
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding" style="padding-top: 20px !important;">
<div class="col-xs-4 left-padding">
</div>
<div class="col-xs-4 left-padding">
</div>
<div class="col-xs-4 left-padding">
<?= Html::a('<i class="fa fa-user"></i> Add Students', ['create'], ['class' => 'btn-sm btn btn-success']) ?>
</div>
</div>
</div>
<div class="students-index box box-body table-responsive">
<!--outside searchabl-->
<?php echo $this->render('_searchstudentsearch', ['model' => $searchModel]); ?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
[
'header' =>'Sl.No',
'class' => 'yii\grid\SerialColumn',
'options' => ['width' => '50']
],
[
'attribute'=>'ccid',
'content' => function($data){
return Center::getCenter($data->ccid);
},
'options' => ['width' => '120'],
'label'=>'Center',
],
[
'attribute' => 'admission_number',
'label' => 'Add No',
'options' => ['width' => '80']
],
[
'attribute' => 'application_reference_no',
'label' => 'Ref No',
'options' => ['width' => '80']
],
'student_name',
'mobile',
[
'attribute'=>'course_applied',
'content' => function($data){
return Groupitems::getGroupitems($data->course_applied);
},
],
[
'attribute' => 'batch',
'label' => 'Batch',
'options' => ['width' => '80'],
],
[
'attribute'=>'category',
'content' => function($data){
return Groupitems::getGroupitems($data->category);
},
],
[
'format'=>'raw',
'attribute' => 'date_of_join',
'format' => ['date', 'php:d-m-Y'],
'options' => ['width' => '1000'],
],
[
'label'=>'Rem/TotFee',
'value'=> function($data)
{
return Html::a($data->remitted_fee.'/'.$data->total_fee,['students/feedisplay','ccid'=>$data->ccid, 'admission_number' => $data->admission_number],
[
'data-toggle'=>"modal",
'data-target'=>"#myModal",
'data-title'=>"Fee Remitted Details",
]); // ubah ini
},
'format' => 'raw'
],
[
'header'=>'Fee',
'value'=> function($data)
{
return Html::a('<span class="fa fa-inr"></span>', ['receipt/create','addno'=>$data->admission_number]);
},
'format' => 'raw'
],
[
'header'=>'Sales',
'value'=> function($data)
{
$url = Yii::$app->getUrlManager()->createUrl(['stock/stocksales/create','addno'=>$data->admission_number]);
return Html::a('<span class="fa fa-shopping-cart"></span>', $url);
},
'format' => 'raw'
],
[
'class' => 'yii\grid\ActionColumn',
'header' => 'Actions',
'headerOptions' => ['style' => 'color:#337ab7'],
'template' => '{view}{update}', //yii::$app->user->can('update-students') ? '{view}{update}':'{view}',
'contentOptions' => ['style' => 'width:70px;'],
],
],
]); ?>
</div>
Controller file
public function
actionFeedisplay($ccid,$admission_number){
// Code here...
return $this->renderAjax('studentsearch_fee.php',['dataFee'=>$dataFee]);
}
Related Links
DropDownList
