Search code examples
yii2yii2-widget

Yii2 Progress Bar in a DetailView


I have a requirement of displaying the Progress Bar in DetailView widget. I searched for it but I got solutions for GridView widget. So that I tried modifying it but didn't work as expected.

<?=DetailView::widget(
    [
        'model' => $model,
        'attributes' =>
        [
            [
                'attribute' => 'progress',
                'label' => 'Activity Progress',
                'type' => DetailView::INPUT_WIDGET,
                'class' => 'yii\bootstrap\Progress',
                'widgetOptions' =>
                [
                    'percent' => 50,
                    'barOptions' => ['class' => 'progress-bar-info'],
                    'options' => ['id' => 'progBar', 'class' => 'active progress-striped']
                ]
            ]
        ]
    ]
)
?>

Solution

  • You need to simply set the column format to raw and return the widget output from the value option simple as that see below I used the yii\bootstrap\Progress widget within the DetailView

    <?php echo DetailView::widget(
        [
            'model' => $model,
            'attributes' =>
            [
                [
                    'attribute' => 'progress',
                    'label' => 'Activity Progress',
                    'format' => 'raw',
                    'value' => function ($model) {
                        // striped animated
                        return \yii\bootstrap\Progress::widget(
                            [
                                'percent' => 70,
                                'options' => ['class' => 'progress-success active progress-striped'],
                            ]
                        );
                    },
                ],
            ],
        ]
    )
    ?>
    

    If you have a field in the database with the name progress that holds the current progress of the row in integer format you can pass $model->progress to the percent option in the yii\bootstrap\Progress widget like "percent"=>$model->progress.