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

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

5 0
7 followers
Viewed: 24 362 times
Version: 1.1
Category: Tips
Written by: Luiz
Last updated by: robregonm
Created on: Jul 2, 2012
Last updated: 11 years ago
Update Article

Revisions

View all history

Related Articles