1. Scenario
2. Controller
3. View
4. Wiki Translations

The yii2-detail-view extension offers you an easy way to EDIT and VIEW your model data, toggle these modes, and adds other features. You can read the extension documentation and/or view a demo of this extension, to understand usage.

This wiki explains additional settings that should be done to your controller to work with the EDIT mode and triggering actions on the SAVE and DELETE buttons.

Note: To use the yii2-datecontrol extension with this widget, you can refer this wiki.

Scenario ¶

Let's say you have a database table named tbl_book with these columns:

id INT(11)
book_code VARCHAR(30)
synopsis TEXT
color VARCHAR(10)
publish_date DATE
status TINYINT(1)
sale_amount DECIMAL(11,2)
buy_amount DECIMAL(11,2)

Generate the Book model and CRUD through Gii.

Controller ¶

After generating the CRUD, delete the actionUpdate method in your BookController.php. Incorporate these changes below:

actionView ¶

Change the actionView method to work with the yii2-detail-view extension.

class BookController extends Controller
{
    public function actionView($id) {
        $model = $this->findModel($id);
        
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['view', 'id' => $model->id]);
        } else {
            return $this->render('view', ['model' => $model]);
        }
    }
}

actionDelete ¶

You can retain your actionDelete as generated by CRUD, or modify it for your needs.

class BookController extends Controller
{
    public function actionDelete($id) {
        $this->findModel($id)->delete();
        return $this->redirect(['index']);
    }
}

View ¶

Edit your view file view.php to work with the yii2-detail-view extension.

use kartik\detail\DetailView;

$this->title = 'View Book'; // $model->name;
$this->params['breadcrumbs'][] = ['label' => 'Books', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;

// setup your attributes
$attributes = [
    [
        'attribute'=>'book_code', 
        'format'=>'raw', 
        'value'=>'<kbd>'.$model->book_code.'</kbd>', 
        'displayOnly'=>true
    ],
    'attribute'=>'book_name',
    [
        'attribute'=>'color', 
        'format'=>'raw', 
        'value'=>"<span class='badge' style='background-color: {$model->color}'> </span> " . 
             "<code>{$model->color}</code>",
        'type'=>DetailView::INPUT_COLOR,
        'inputWidth'=>'40%'
    ],
    [
        'attribute'=>'publish_date', 
        'format'=>'date',
        'type'=>DetailView::INPUT_DATE,
        'widgetOptions'=>[
            'pluginOptions'=>['format'=>'yyyy-mm-dd']
        ],
        'inputWidth'=>'40%'
    ],
    [
        'attribute'=>'status', 
        'label'=>'Available?',
        'format'=>'raw',
        'value'=>$model->status ? 
            '<span class="label label-success">Yes</span>' : 
            '<span class="label label-danger">No</span>',
        'type'=>DetailView::INPUT_SWITCH,
        'widgetOptions'=>[
            'pluginOptions'=>[
                'onText'=>'Yes',
                'offText'=>'No',
            ]
        ]
    ],
    [
        'attribute'=>'sale_amount',
        'label'=>'Sale Amount ($)',
        'format'=>'double',
        'inputWidth'=>'40%'
    ],  
    [
        'attribute'=>'author_id',
        'format'=>'raw',
        'value'=>Html::a('John Steinbeck', '#', ['class'=>'kv-author-link']),
        'type'=>DetailView::INPUT_SELECT2, 
        'widgetOptions'=>[
            'data'=>ArrayHelper::map(Author::find()->orderBy('name')->asArray()->all(), 'id', 'name'),
            'options'=>['placeholder'=>'Select ...'],
            'pluginOptions'=>['allowClear'=>true]
        ],
        'inputWidth'=>'40%'
    ],
    [
        'attribute'=>'synopsis',
        'format'=>'raw',
        'value'=>'<span class="text-justify"><em>' . $model->synopsis . '</em></span>',
        'type'=>DetailView::INPUT_TEXTAREA, 
        'options'=>['rows'=>4]
    ]
];

echo DetailView::widget([
    'model'=>$model,
    'attributes'=>$attributes,
    'deleteOptions'=>[
        'url'=>['delete', 'id' => $model->id],
        'data'=>[
            'confirm'=>Yii::t('app', 'Are you sure you want to delete this record?'),
            'method'=>'post',
        ],
    ]
]);

That's it, now when you browse to localhost/book/view?id=<id> you should be able to update, save, and delete your records.

Wiki Translations ¶

• 中文版本 / Chinese