Yii2 Filtering Gridview within Modal Dialog? - modal-dialog

Question

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.

Answer 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.