Yii2: GridView inline editing with Editable Column

Inline editing provides a quicker way to update data without navigating away from the page. However the built-in GridView does not provide this capability. Thankfully there are 3rd party solutions. One that I use is Krajee’s GridView which has Editable Column to serve this purpose.

There’s a tutorial on setting up the grid to allow inline editing.

Here are some coding templates that I often use.

Basic with text input

In view file:

<php 
use kartik\grid\GridView; 
use kartik\editable\Editable; 
use kartik\popover\PopoverX; 
?> 
 
<= GridView::widget([ 'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
 
        [
            'attribute' => 'name',
            'class'         => 'kartik\grid\EditableColumn',
            'editableOptions'   => function($model, $key, $index) {
                return [
                    'header'        => 'Header Name',
                    'formOptions'   => [
                        'action'    => [
                            '/path/to/update-editable'
                        ],
                    ],
                    'submitButton'  => [
                        'class' => 'btn btn-sm btn-primary',
                        'icon'  => '<i class="glyphicon glyphicon-floppy-disk"></i>',
                    ],
                ];
            },
        ],
        [
            'class' > 'yii\grid\ActionColumn',
            'template'  >; '{delete}',
        ],
       
]); >

Notes:

  • Line 4: you’ll need this if you inline edit is done via popup box and you want to specify placement of the popup box.
  • Line 20: by default, handling inline editing is done from the same action that displays the page. This makes the code quite messy. I prefer to define another action to handle inline editing. See next section.
  • Line 22: I don’t like the default icon that’s used for Save. I change to another icon which looks more like it’s a save action.

The Action

If you prefer to have different action in controller to handle inline editing (code is based on the tutorial):

use yii\web\Response;
class SomeController extends Controller {
    public function actionUpdateEditable() {
        if (Yii::$app>request->post('hasEditable')) {
            Yii::$app->;response->format = Response::FORMAT_JSON;
 
            $model = $this->findModel(Yii::$app->request->post('editableKey'));
 
            $out = [
                'output'    => '',
                'message'   => '',
            ];
 
            // fetch the first entry in posted data (there should
            // only be one entry anyway in this array for an
            // editable submission)
            // - $posted is the posted data for Model without any indexes
            // - $post is the converted array for single model validation
            $posted = current($_POST[$model->formName()]);
            $post[$model->formName()] = $posted;
            Yii::info('processed post:' . print_r($posted,true));
 
            if ($model->load($post)) {
                if (!$model->save()) {
                    $out = [
                        'output'    => '',
                        'message'   => $model->getFirstError(),
                    ];
                }
                Yii::info('editable returns:' . print_r($out,true));
                return $out;
            }
        }
    }
}

Notes:

  • Line 9: This is the returned ajax response (see line 31). ‘output’ is the value to be displayed on the grid column after update – Set it to some value if different from the field value. ‘message’ is the error message.

Leave a Reply

Your email address will not be published. Required fields are marked *