#editablecolumn

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/rapidly-setup-gridview-editable-cells-with-editable-column-action/

Rapidly setup GridView editable cells with EditableColumnAction

This webtip is a follow-up to setting up an editable column to manipulate records in Yii2 grid view and a provides faster and easier alternative to setting up editable cells. With release v3.0.9 of the kartik-v\yii2-grid, the module allows you to use an EditableColumnAction to rapidly set up your controller action to manage EditableColumn cells in the grid.

Before proceeding to read this webtip, please do read the setting up an editable column to manipulate records in Yii2 grid view article in detail. This webtip will explain how in Yii 2 Framework, we can setup the enhanced Krajee EditableColumn and enhanced Krajee EditableColumnAction to work with the Krajee GridView widget.

The Use Case

Let’s consider the same example of editing books in a library as seen on the Krajee grid demos page. If you watch the demo, the Book Name and Buy Amount columns are Editable. We will also consider editing of the Publish Date for the example. Let’s consider the following:

We will setup the name and buy_amount attributes to be editable in the grid

We will setup model validation rules for the above two attributes.

We will configure the name to be edited through a HTML text input. In addition, we will also show the book_color input within the name editable form.

We will configure the buy_amount to be edited through the TouchSpin widget from Krajee. We will have publish_date editable as normal text.

We will setup the grid rendering controller action to also validate the editable submissions and validate posted records to save to the database.

We will bypass all the other controller setups and just setup a new action via EditableColumnAction within the controller. We will refer this new action within EditableColumn::formOptions['action'] for each editable cell.

STEP 1: Setup model

Setup your model attributes and validation rules very similarly to the configuration in the earlier webtip.

/** * Book model class */ class Book extends \yii\db\ActiveRecord /** * @inheritdoc */ public function rules() return [ [['name', 'buy_amount'], 'required'], [['name', 'buy_amount', 'publish_date'], 'safe'], [['buy_amount'], 'number', 'min'=>0, 'max'=>5000] ];

STEP 2: Setup view (grid and editable columns)

There is a small difference in setting up your editable column in GridView versus the earlier webtip. Instead of tampering with the index action, we will add a new editable form action URL editbook to update the editable. Note the formOptions within editableOptions.

// the grid columns setup (only two column entries are shown here // you can add more column entries you need for your use case) $gridColumns = [ // the name column configuration [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'name', 'pageSummary'=>true, 'editableOptions'=> function ($model, $key, $index) return [ 'header'=>'Name', 'size'=>'md', 'formOptions'=>['action' => ['/site/editbook']], // point to the new action 'afterInput'=>function ($form, $widget) use ($model, $index) return $form->field($model, "color")->widget(\kartik\widgets\ColorInput::classname(), [ 'showDefaultPalette'=>false, 'options'=>['id'=>"color-$index"], 'pluginOptions'=>[ 'showPalette'=>true, 'showPaletteOnly'=>true, 'showSelectionPalette'=>true, 'showAlpha'=>false, 'allowEmpty'=>false, 'preferredFormat'=>'name', 'palette'=>[ ["white", "black", "grey", "silver", "gold", "brown"], ["red", "orange", "yellow", "indigo", "maroon", "pink"], ["blue", "green", "violet", "cyan", "magenta", "purple"], ] ], ]); ]; ], // the buy_amount column configuration [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'buy_amount', 'editableOptions'=>[ 'header'=>'Buy Amount', 'formOptions'=>['action' => ['/site/editbook']], // point to the new action 'inputType'=>\kartik\editable\Editable::INPUT_SPIN, 'options'=>['pluginOptions'=>['min'=>0, 'max'=>5000]] ], 'hAlign'=>'right', 'vAlign'=>'middle', 'width'=>'100px', 'format'=>['decimal', 2], 'pageSummary'=>true ], // the publish_date column configuration [ 'class'=>'kartik\grid\EditableColumn', 'attribute'=>'publish_date', 'hAlign'=>'center', 'vAlign'=>'middle', 'filterType'=>GridView::FILTER_DATE_RANGE, 'filterWidgetOptions'=>[ 'pluginOptions' => [ 'autoUpdateInput' => false, ] ], 'editableOptions' => [ 'inputType' => Editable::INPUT_DATE, 'formOptions' => ['action' => ['/site/editbook']], 'options' => [ 'convertFormat'=>true, 'pluginOptions' => ['format' => 'php:Y-m-d'] ] ] ], ]; // the GridView widget (you must use kartik\grid\GridView) echo \kartik\grid\GridView::widget([ 'dataProvider'=>$dataProvider, 'filterModel'=>$searchModel, 'columns'=>$gridColumns ]);

STEP 3: Setup controller action

This is the part where you can see most of the change. You do not need to change the actionIndex generated by default by gii. Instead we will add a new action using EditableColumnAction to rapidly process editable column updates as shown below:

use kartik\grid\EditableColumnAction; use yii\web\Controller; use yii\helpers\ArrayHelper; use app\models\Book; class SiteController extends Controller public function actions() return ArrayHelper::merge(parent::actions(), [ 'editbook' => [ // identifier for your editable action 'class' => EditableColumnAction::className(), // action class name 'modelClass' => Book::className(), // the update model class 'outputValue' => function ($model, $attribute, $key, $index) $fmt = Yii::$app->formatter; $value = $model->$attribute; // your attribute value if ($attribute === 'buy_amount') // selective validation by attribute return $fmt->asDecimal($value, 2); // return formatted value if desired elseif ($attribute === 'publish_date') // selective validation by attribute return $fmt->asDate($value, 'php:Y-m-d');// return formatted value if desired return ''; // empty is same as $value , 'outputMessage' => function($model, $attribute, $key, $index) return ''; // any custom error after model save , // 'showModelErrors' => true, // show model errors after save // 'errorOptions' => ['header' => ''] // error summary HTML options // 'postOnly' => true, // 'ajaxOnly' => true, // 'findModel' => function($id, $action) , // 'checkAccess' => function($action, $model) ] ]);

Note the entire action can be simplified as shown below if you do not wish advanced configuration (like the outputValue setting is optional). For example:

public function actions() return ArrayHelper::merge(parent::actions(), [ 'editbook' => [ // identifier for your editable action 'class' => EditableColumnAction::className(), // action class name 'modelClass' => Book::className(), // the update model class ] ]);

The action will thus automatically save the base model records edited via EditableColumn form and is a much easier way to manipulate all EditableColumn records in the GridView with one single action. For advanced cases, (e.g. where your modelClass may change), you may create multiple action identifiers within the actions array above and refer these actions within the EditableColumn::editableOptions['formOptions']['action'] configuration.

[krajeesolutions]

New Post has been published on Krajee Web Tips

New Post has been published on http://webtips.krajee.com/setup-editable-column-grid-view-manipulate-records/

How to setup an editable column to manipulate records in Yii2 grid view

This webtip will explain how to setup the enhanced EditableColumn to work with the \kartik\grid\GridView widget. The objective is to achieve the following functionality using kartik\grid\GridView and kartik\grid\EditableColumn:

configure a grid cell content to be editable

use advanced input widgets to edit content

capture the editable content POSTED via controller and update database via ajax

trigger model validation and validation error messages if needed

About GridView

Before we start, the GridView is an enhanced grid widget that extends the yii\grid\GridView widget with various new features, plugins and makes it snappy for developers to create grid related user interfaces.

About EditableColumn

This is an enhanced grid column available within the kartik\grid\GridView extension. It allows you to quickly create an editable grid cell content by triggering a popover.

The Use Case

Let’s consider the example of editing books in a library. The final output of the grid is seen on the Krajee grid demos page. If you watch the demo, the Book Name and Buy Amount columns are Editable. Let’s consider the following:

We will setup the name and buy_amount attributes to be editable in the grid

We will setup model validation rules for the above two attributes.

We will configure the name to be edited through a HTML text input. In addition, we will also show the book_color input within the name editable form.

We will configure the buy_amount to be edited through the TouchSpin widget from Krajee.

We will setup the grid rendering controller action to also validate the editable submissions and validate posted records to save to the database.

STEP 1: Setup model

Setup any model validation rules for your attributes. For the example we will set name and buy_amount to be mandatory/required. We will also setup buy_amount as a number field and must lie between 0 and 5000.

/** * Book model class */ class Book extends \yii\db\ActiveRecord /** * @inheritdoc */ public function rules() return [ [['name', 'buy_amount'], 'required'], [['name', 'buy_amount'], 'safe'], [['buy_amount'], 'number', 'min'=>0, 'max'=>5000] ];

STEP 2: Setup view (grid and editable columns)

The firstmost important part is to setup your view file rendering the grid to show these editable columns the way we desire. So here is the configuration we will do:

the name will be edited by a text input and will also allow editing the book color using the ColorInput widget from Krajee. We will use a Closure method to configure editableOptions. The ColorInput can be embedded using the afterInput property in editableOptions.

the buy_amount will be edited by the TouchSpin widget from Krajee. We will configure the editableOptions as an array in this case.

// the grid columns setup (only two column entries are shown here // you can add more column entries you need for your use case) $gridColumns = [ // the name column configuration [ 'class' => 'kartik\grid\EditableColumn', 'attribute' => 'name', 'pageSummary' => true, 'editableOptions'=> function ($model, $key, $index) return [ 'header'=>'Name', 'size'=>'md', 'afterInput' => function ($form, $widget) use ($model, $index) return $form->field($model, "color")->widget(\kartik\widgets\ColorInput::classname(), [ 'showDefaultPalette' => false, 'options'=>['id'=>"color-$index"], 'pluginOptions' => [ 'showPalette' => true, 'showPaletteOnly' => true, 'showSelectionPalette' => true, 'showAlpha' => false, 'allowEmpty' => false, 'preferredFormat' => 'name', 'palette' => [ [ "white", "black", "grey", "silver", "gold", "brown", ], [ "red", "orange", "yellow", "indigo", "maroon", "pink" ], [ "blue", "green", "violet", "cyan", "magenta", "purple", ], ] ], ]); ]; ], // the buy_amount column configuration [ 'class' => 'kartik\grid\EditableColumn', 'attribute'=>'buy_amount', 'editableOptions' => [ 'inputType' => \kartik\editable\Editable::INPUT_SPIN, 'options' => [ 'pluginOptions' => ['min'=>0, 'max'=>5000] ] ], 'hAlign'=>'right', 'vAlign'=>'middle', 'width'=>'100px', 'format'=>['decimal', 2], 'pageSummary' => true ], ]; // the GridView widget (you must use kartik\grid\GridView) echo \kartikgridGridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => $gridColumns ]);

STEP 3: Modify controller action for validating Editable

The next most important part is to modify your controller action that renders the view file containing the GridView. Let’s say this action is named actionIndex. You will need to load and validate the output of EditableColumn using Model::loadMultiple & Model::validateMultiple methods as shown below.

public function actionIndex() // your default model and dataProvider generated by gii $searchModel = new BookSearch; $dataProvider = $searchModel->search(Yii::$app->request->getQueryParams()); // validate if there is a editable input saved via AJAX if (Yii::$app->request->post('hasEditable')) // store a default json response as desired by editable $out = Json::encode(['output'=>'', 'message'=>'']); // you must get the default models from your dataProvider $models = $dataProvider->getModels(); // load models from POST using loadMultiple method if (Model::loadMultiple($models, Yii::$app->request->post())) // fetch the first entry (there should only be one entry // anyway in this array for an editable submission) // - $index will give you the row index // - $model will return the row model foreach ($models as $index => $model) break; $output = ''; // check if buy_amount was posted for Book model if (isset($_POST['Book'][$index]['buy_amount'])) $output = Yii::$app->formatter->asDecimal($model->buy_amount, 2); $out = Json::encode(['output'=>$output, 'message'=>'']); if (Model::loadMultiple($models, Yii::$app->request->post())) // if you wish to validate you can uncomment the code below // if (!Model::validateMultiple($models) // /* raise a validation error */ // $out = Json::encode(['output'=>'', 'message'=>'Validation error']); // echo $out; // return; // // fetch the first entry (there should only be one entry // anyway in this array for an editable submission) // - $index will give you the grid row index // - $model will return the grid row model foreach ($models as $index => $model) break; // custom output to return to be displayed as the editable grid cell // data. Normally this is empty - whereby whatever value is edited by // in the input by user is updated automatically. $output = ''; // specific use case where you need to validate a specific // editable column posted when you have more than one // EditableColumn in the grid view. We evaluate here a // check to see if buy_amount was posted for the Book model if (isset($_POST['Book'][$index]['buy_amount'])) $output = Yii::$app->formatter->asDecimal($model->buy_amount, 2); $out = Json::encode(['output'=>$output, 'message'=>'']); // return ajax json encoded response and exit echo $out; return; // non-ajax - render the grid by default return $this->render('index', [ 'dataProvider' => $dataProvider, 'searchModel' => $searchModel ]);

STEP 4: Test the grid and editable

Run your view and test out for any validation or ajax errors. You can view the Krajee grid demo page to see the output of the above configured example.