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

You are viewing revision #7 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#6)next (#8) »

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

5 0
7 followers
Viewed: 24 541 times
Version: Unknown (update)
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