Updating Gridview Using Pajax

How to  save data to show grid view using ajax in yii2 ?

Here is a example on how to use Pjax with GridView (yii\grid\GridView) and ActiveForm (yii\widgets\ActiveForm) widgets in Yii2.


Output Form

The example uses a db table "itemsgrid" with field id, item_code, item_name, item_price.

index methord in Controller

    public function actionIndex()
    {
        
        $model = new Itemsgrid();

        if ($model->load(Yii::$app->request->post()) && $model->save())
        {
            $model = new Itemsgrid(); //reset model
        }        
        
        $searchModel = new ItemsgridSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'model' => $model,
        ]);
    }

index.php in Views

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;


$this->title = 'Itemsgrids';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="itemsgrid-index">

    <br>
    <h1>Add Items in Stock</h1>
    <br>
    
<!-- Render create form -->    
    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>
    
    <br><br>
    
    <?php Pjax::begin(['id' => 'itemsgridtable']) ?>
    
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

          //  'id',
            'item_code',
            'item_name',
            'item_price',

            //['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
    
    <?php Pjax::end() ?>
    
</div>


_form.php in Views


<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\Pjax;

?>

<?php

$this->registerJs(
   '$("#new_itemsgrid").on("pjax:end", function() {
        //commonLib.divAction("#div_new_model", "hide"); //hide form
        $.pjax.reload({container:"#itemsgridtable"});  //Reload GridView
    });', \yii\web\View::POS_READY
);
?>

<div class="itemsgrid-form">
    
    <?php yii\widgets\Pjax::begin(['id' => 'new_itemsgrid']) ?>
    <?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>

    <table><tr><td>
                <?= $form->field($model, 'item_code')->textInput(['maxlength' => true]) ?>                         
            </td><td>
                <?= $form->field($model, 'item_name')->textInput(['maxlength' => true]) ?>
            </td><td>
                <?= $form->field($model, 'item_price')->textInput(['maxlength' => true]) ?>
            </td><td>
                <div class="form-group">
                    <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
                </div>
            </td>    
    </tr></table>
    
    

    <?php ActiveForm::end(); ?>
    <?php yii\widgets\Pjax::end() ?>
    
</div>


www.yiiframework.com/wiki/772/pjax-on-activeform-and-gridview-yii2/

Yii2: Updating Grid-view using Pjax