Yii 1.1: BootProgressColumn - Progress Bar Inside GridView Column compatible with 'bootstrap' extension

10 followers

A little hint of how to create a progress bar inside the column of the grid, using the 'bootstrap' extension.

Create a file named BootProgressColumn.php inside protected/components directory.

Add the following content to this file:

<?php
 
/**
 * Implements the BootProgress inside CDataColumn
 *
 * @author Luiz
 */
class BootProgressColumn extends CDataColumn {
    // Progress bar types.
 
    const TYPE_DEFAULT = '';
    const TYPE_INFO = 'info';
    const TYPE_SUCCESS = 'success';
    const TYPE_DANGER = 'danger';
 
    /**
     * @var string the bar type.
     * Valid values are '', 'info', 'success', and 'danger'.
     */
    public $type = self::TYPE_DEFAULT;
 
    /**
     * @var boolean whether the bar is striped.
     */
    public $striped = false;
 
    /**
     * @var boolean whether the bar is animated.
     */
    public $animated = false;
 
    /**
     * @var integer the progress.
     */
    public $percent = 0;
 
    public $htmlOpt = array('class'=>'progress');
 
    /**
     * Initializes the widget.
     */
    public function init() {
        $classes = array('progress');
 
        $validTypes = array(self::TYPE_DEFAULT, self::TYPE_INFO, self::TYPE_SUCCESS, self::TYPE_DANGER);
        if ($this->type !== self::TYPE_DEFAULT && in_array($this->type, $validTypes))
            $classes[] = 'progress-' . $this->type;
 
        if ($this->striped)
            $classes[] = 'progress-striped';
 
        if ($this->animated)
            $classes[] = 'active';
 
        $classes = implode(' ', $classes);
 
        $this->htmlOpt['class'] = $classes;
 
        if ($this->percent < 0)
            $this->percent = 0;
        else if ($this->percent > 100)
            $this->percent = 100;
    }
 
        protected function renderDataCellContent($row, $data) {
        if ($this->value !== null)
        {
            $value = $this->evaluateExpression($this->value, array('data' => $data, 'row' => $row));
 
        }
        else if ($this->name !== null)
            $value = CHtml::value($data, $this->name);        
 
        if($this->percent!==0)
            $this->percent = $value;
        echo CHtml::openTag('div', $this->htmlOpt);
        echo '<div class="bar" style="width: ' . $this->percent . '%;"></div>';
        echo '</div>';
    }
 
    /**
     * Renders the filter cell.
    */
    public function renderFilterCell()
    {
        echo '<td><div class="filter-container">';
    $this->renderFilterCellContent();
    echo '</div></td>';
    }
 
}
 
?>

In your view use the widget BootGridView like this:

<?php
 
$this->widget('bootstrap.widgets.BootGridView', array(
    'id' => 'campanha-grid',
    'dataProvider' => $model->search($this->getOrganizacao()),
    'filter' => $model,
    'columns' => array(
        'id',
        'name',
        array(
            'class' => 'application.components.BootProgressColumn',
            'name' => 'percentage',
            'percent' => 'percentage',
        ),
    ),
));
 
?>

Based On Bootprogress Widget, From boostrap extension

Download as extension file

Total 1 comment

#8974 report it
Peter JK at 2012/07/11 03:32am
thank you..

thank you ...

it is a simple but very useful extension...

http://www.flickr.com/photos/63521556@N08/7548276842/in/photostream

Leave a comment

Please to leave your comment.

Write new article