You are viewing revision #6 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.
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
thank you..
thank you ...
it is a simple but very useful extension...
http://www.flickr.com/photos/63521556@N08/7548276842/in/photostream
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.