Tips for Yii. Chapter 10.
-
Let’s output CStarRating in GridView.
Instead of introduction: The site has a comments system with rating (giving grades with the help of the CStarRating widget). Our task is to display the rating like ‘stars’ in the GridView.

So we have to copy the key of the ‘value’ array into the view file:
- $this->grid->controller->widget("CStarRating", array("name" => $data->id, "id" => $data->id, "value" => $data->rating, "readOnly" => true,),true)
The full view of the result will be like the following:
- array(
- 'name' => 'rating',
- 'type' => 'raw',
- 'value'=>'$this->grid->controller->widget("CStarRating", array("name" => $data->id, "id" => $data->id, "value" => $data->rating, "readOnly" => true,),true)',
- 'headerHtmlOptions' => array('style' => 'width:85px;'),
- 'htmlOptions' => array('class' => 'rating-block'),
- 'filter' => false,
- 'sortable' => false,
- ),
And we have to add the following code for view to work correctly (the stars not to be displayed like radio buttons' list) after searching/sorting/filtering;
- 'afterAjaxUpdate'=>"function() {
- jQuery('.rating-block input').rating({'readOnly':true});
- }",
So as a result we will get the following code:
- $this->widget('bootstrap.widgets.TbGridView', array(
- 'id'=>'users-comments-grid',
- 'dataProvider'=>$model->search(),
- 'filter'=>$model,
- 'afterAjaxUpdate'=>"function() {
- jQuery('.rating-block input').rating({'readOnly':true});
- }",
- 'columns'=>array(
- array(
- 'name' => 'message',
- 'sortable' => false,
- ),
- array(
- 'name' => 'rating',
- 'type' => 'raw',
- 'value'=>'$this->grid->controller->widget("CStarRating", array("name" => $data->id, "id" => $data->id, "value" => $data->rating, "readOnly" => true,),true)',
- 'headerHtmlOptions' => array('style' => 'width:85px;'),
- 'htmlOptions' => array('class' => 'rating-block'),
- 'filter' => false,
- 'sortable' => false,
- ),
- ),
- ));
-
Let's extend CFormatter.
In the same GridView or DetailView we more than often set the field type, for instance: 'type' => 'raw', 'type' => 'text' etc.
For GridView it may have the following view:
- array(
- 'name' => 'text',
- 'type' => 'raw',
- )
For DetailView it may look like this:
- array(
- 'label' => 'Email',
- 'value' => ' email@email.com',
- 'type' => 'email',
- 'template' => "<tr class=\"{class}\"><th>{label}</th><td>{value}</td></tr>\n"
- ),
But we often use only such types as 'raw', 'email', 'image' and 'url'.
You can read more about CFormatter and all its types on the Documentation page - http://www.yiiframework.com/doc/api/1.1/CFormatter
Let's extend this class in such a way that our filter will cut the text and will output 5 words with three dots when outputting long sentences.
In the protected/components folder let’s create a new CCFormatter.php file with the following content:
- <?php
- class CCFormatter extends CFormatter {
- public $numOfWords = 5;
-
- public function formatTtext($value) {
- $value = CHtml::encode($value);
-
- $lenBefore = strlen($value);
-
- if($this->numOfWords){
- if(preg_match("/\s*(\S+\s*){0,$this->numOfWords}/", $value, $match)){
- $value = trim($match[0]);
- }
- if(strlen($value) != $lenBefore){
- $value .= ' ...';
- }
- }
-
- return $value;
- }
- }
Add some lines in the 'components' section in the config/main.php file:
- 'format' => array(
- 'class' => 'application.components.CCFormatter'
- ),
Check its work when being displayed in DetailView:
- array(
- 'label' => 'Text',
- 'value' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
- 'type' => 'ttext',
- 'template' => "<tr class=\"{class}\"><th>{label}</th><td>{value}</td></tr>\n"
- ),
And in the output we will see this:

Discuss the article in the forum