Quick and easy self note: when using Kartik plugins for Yii2, and including them in a Pjax container, some may need to be reinitialized.
Without getting crazy, Kartik already thought about this by providing a common property to all his widgets: pjaxContainerId. As the documentation states:
container ID if applicable inside which the widget will be rendered. If this is set, the widget will automatically reinitialize on pjax render completion.
So if you set that value to the ID of the pjax container, when the content is loaded the widget will be initialized correctly.
For example:
Pjax::begin([
'id' => 'form-pjax',
]);
echo $form->field($model, 'data_lettura_iniziale')->widget(DateControl::className(), [
'ajaxConversion' => false,
'pjaxContainerId' => 'form-pjax', // No need to prepend #
'pluginOptions' => [
'autoclose' => true,
],
]);
Pjax::end();
Hi!
I did what exactly Kartik (and you) has suggested, but my DatePicker still not behaving well, probably not intializing. Here is my code if you can help me:
‘form-pjax’]); ?>
$dataProvider,
‘filterModel’ => $searchModel,
‘responsive’ => true,
‘pjax’ => true,
‘pjaxContainerId’ => ‘form-pjax’,
‘pjaxSettings’ => [‘neverTimeout’=>true],
‘toggleDataContainer’ => [‘class’ => ‘btn-group mr-2 me-2’],
‘panel’ => [
‘type’ => GridView::TYPE_INFO,
‘heading’ => ‘Hot Topics List’
],
‘toolbar’ => [
[
‘content’ => Html::a(‘‘, [‘create’], [‘title’=>’Create Hot Topic’, ‘class’=>’btn btn-success’]) . ‘ ‘
. Html::a(‘‘, [‘/hot-topics’], [‘title’=>’Reset Grid’, ‘class’=>’btn btn-secondary btn-default’]),
],
‘{export}’,
‘{toggleData}’
],
‘columns’ => require(__DIR__.’/_columns.php’),
]); ?>
and my _columns.php:
return
[
[‘class’ => ‘yii\grid\SerialColumn’],
/* [
‘class’ => ‘\kartik\grid\DataColumn’,
‘attribute’ => ‘id’
], */
[
‘attribute’ => ‘date’,
‘width’ => ‘310px’,
‘value’ => function ($model, $key, $index, $widget) {
return $model->date;
},
‘filterType’ => Gridview::FILTER_DATE,
‘filter’ => DatePicker::widget([
‘model’ => $searchModel,
‘attribute’ => ‘date’,
‘pluginOptions’ => [
‘pjaxContainerId’ => ‘form-pjax’,
‘autoclose’ => true,
‘format’ => ‘yyyy-mm-dd’,
],
]),
‘filterWidgetOptions’ => [
‘pluginOptions’ => [‘allowClear’ => true,],
],
‘filterInputOptions’ => [‘placeholder’ => ‘Select Date’],
‘group’ => true, // enable grouping
//’groupedRow’ => true, // move grouped column to a single grouped row
‘format’ => ‘html’,
],
[
‘class’ => ‘\kartik\grid\DataColumn’,
‘attribute’ => ‘title’
],
[
‘class’ => ‘\kartik\grid\DataColumn’,
‘attribute’ => ‘is_pin’
],
[
‘class’ => ‘kartik\grid\ActionColumn’,
‘template’ => ‘{update} {delete}’,
‘buttons’ => [
‘update’ => function($url, $model, $id){
return Html::a(‘‘, Url::toRoute([‘update’, ‘id’ => $id]));
},
‘delete’ => function($url, $model){
return Html::a(‘‘, Url::toRoute([‘delete’]), [
‘title’ => ‘DELETE’,
‘data’ => [
‘confirm’ => ‘Are you sure you want to delete this entry?’,
‘method’ => ‘post’,
‘params’ => [‘id’=>$model->id]
]
]);
},
/* ‘edit’ => function($url, $model, $action){
return Url::toRoute([$action, ‘id’, $model->id]);
} */
],
]
];