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:
/** * 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:
$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
Total 1 comment
thank you ...
it is a simple but very useful extension...
http://www.flickr.com/photos/63521556@N08/7548276842/in/photostream
Leave a comment
Please login to leave your comment.