CODEWITHSUNDEEP
modal-dialogyii2pjax
rangganovsky
rangganovsky

Reputation: 1

Yii2 Filtering Gridview within Modal Dialog?

i've been trying to create yii\jui\Dialog that is triggered on button click in the form view. the Dialog itself will contain a Gridview Widget within it using Yii 2.0.

i have managed to create the dialog and fill it with the Gridview widget. the only problem that i encounter is that the Gridview within the dialog is can't be filtered properly. the filter process is fine though, but every time i filtered the Gridview, the Dialog modal will also be closed.

i also have tried to use Pjax by encapsulate the gridview within Pjax widget. this time the modal Dialog won't be closed. but then it can only filter 1 time. once the Gridview is filtered then we can't filter it anymore.

below is my "_form" view : (i am using button called "cari" to trigger the pop up dialog)

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'judul')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'isi')->textarea(['rows' => 6]) ?>

<?= $form->field($model, 'kategori_id', [
    'addon' =>  ['append' => 
                    ['content'=> 
                        Html::button('x', ['class'=>'btn btn-default','name' => 'del_kat', 'id' => 'del_kat', 'onclick' => '$("#kat_id").val("");'])  . PHP_EOL .
                        Html::button('Cari', ['class'=>'btn btn-primary','id' => 'modal_kat', 'onclick' => '$("#kategori_dialog").dialog("open"); return false;' ]),

                        'asButton' => true
                    ]
                ]
])->textInput(['id'=> 'kat_id', 'readonly' => true]) ?>

here is my GridView Code :

GridView::widget([
    'dataProvider' => $kategoriModel->search(Yii::$app->request->queryParams),
    'filterModel' => $kategoriModel,
    'columns' => [
        'kategori_id',
        'nama',
         [
            'label' => 'test',
            'format' => 'raw',
            'value' => function ($data) {

                return Html::button('+', ['class'=>'btn btn-default','id' => 'modal_kat', 'onclick' => '$("#kategori_dialog").dialog("close"); $("#kat_id").val("'.$data->kategori_id.'");' ]);
            },
        ],


    ],

]);

and here is Dialog Code :

Dialog::begin([
'id' => 'kategori_dialog',
'clientOptions' => [
    'modal' => true,
    'autoOpen'=>false,
     'title'=>'List Kategori',
     'width'=>'auto',
],

]);

Pjax::begin(['id' => 'kategori-pjax', 'enablePushState'=>false]);
echo $kategoriGrid;
Pjax::end(); 

Dialog::end();

as you guys can see, i tried to use Pjax but i couldn't make it work as expected (as i can only filter the Gridview once then it can be filtered again). i remember doing this just fine back in Yii 1.1 (i was using CJuiDialog back).

so i wonder if i am missing something here in Yii 2.0? i am kinda new to Pjax stuff, so i think i miss some properties that have to be set in the Pjax widget.

Upvotes: 0

Views: 1527

Answers (1)

rangganovsky
rangganovsky

Reputation: 1

in my case, the solution to this is by using Kartik's Gridview. i installed it and set the Pjax property to true.

use kartik\grid\GridView; 
GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $model,
    'columns' => $gridColumns,
    'pjax' =>true,
]);

and now i can successfully filter the grid within the dialog. it looks like Kartik has better implementation when wrapping the Grid with Pjax Container.

Upvotes: 0

Related Questions