Using ajax to invoke a controller action when a GridView checkboxcolumn is clicked

Yii 2.0 General Discussions
1

Hi all,

I have a Kartik Gridview grid with a check box in the final column, and when the checkbox is clicked, I want to use Ajax to invoke an action in my controller to update a database row. My GridView will display the rows in one of my database tables, and when the user checks or unchecks the checkbox column in any row, I want to update the selected row in the database table immediately.

When the ajax call is made to invoke the controller action, I will want to pass the data-key attribute to the action so that I know which row to update.

I’ve created an ajax.js Javascript file, and have managed to get it to load by registering it within the controller’s init() function. However, I’m really struggling to figure out how to fire a Javascript event when the checkbox is clicked, and then how to make the ajax call to invoke the action in the controller.

I’ve posted my the code in my view below. Any help, or better still, working examples will be greatly appreciated!


<?php


use yii\helpers\Html;

use kartik\grid\GridView;

use yii\widgets\ActiveForm;


/* @var $this yii\web\View */

/* @var $searchModel app\models\ImpbufferSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */


$this->title = 'Transactions to Import for Account ' . $accountModel->accountname;

$this->params['breadcrumbs'][] = $this->title;

?>

<div class="impbuffer-index">


	<h1><?= Html::encode($this->title) ?></h1>

    <?php // echo $this->render('_search', ['model' => $searchModel]); 

        foreach (Yii::$app->session->getAllFlashes() as $key => $message) {

            echo '<div class="alert alert-' . $key . '">' . $message . '</div>';

        }

    ?>

    

    <?= GridView::widget([

        'dataProvider' => $dataProvider,

        // 'filterModel' => $searchModel,

        'export' => false,

        'condensed' => true,

        'columns' => [

            ['class' => 'yii\grid\SerialColumn'],


            // 'impbufferid',

            // 'accountid',

            'transdate',

            'reference',

            [

                // Transaction amount

                'class' => '\kartik\grid\DataColumn',

                'attribute' => 'amount',

                'hAlign' => 'right',

                'header' => 'Amount',

                'format'=>['decimal', 2],

             ],

            [

                // Balance

                'class' => '\kartik\grid\DataColumn',

                'attribute' => 'balance',

                'hAlign' => 'right',

                'header' => 'Balance',

                'format'=>['decimal', 2],

             ],

            // 'importflag:boolean',

            [

                // Import checkbox

                'class' => '\kartik\grid\CheckBoxColumn',

                'rowHighlight' => true,

                'header' => 'Import',

                'checkboxOptions' => function ($model, $key, $index, $column)

                {return ['value' => $model->importflag,

                    'checked' => $model->importflag ? true : false,

                ];}],

        ],

    ]);


    $form = ActiveForm::begin();

    

    echo Html::hiddenInput('accountid', $accountModel->accountid);

    

    echo Html::submitButton('Import' , ['class' => 'btn btn-primary']);

    

    ActiveForm::end();

                

    ?>


</div>
1 Like