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.
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.