Menus

Thursday, 26 October 2017

Yii2 Gridview with popup

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,
]);


Yii2 grid with Editable column



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

Yii2 Dependent Drop Down Lists

CheckboxList Advanced Operations

Yii2 ListBox Field