Custom column in TbGridView with icon by condition, find out icon class glyphicons easy (YiiBooster)

4 followers

This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.

  • First of all, You have to find out the class of the desired icon, so visit the http://getbootstrap.com/2.3.2/base-css.html#icons

  • Get the class of corresponding icon

  • You have to create either your CButtonColumn extension or create a simple logic inside of the value column

See an example of a custom column

array(
    //the header of the column
    'header' => 'custom',
    //make sure that the below text will be displayed as html
    'type'=>'raw',
    //make a logic decision: if 'anAttribute' value for each data-row is in a region values choose the first icon. Otherwise choose another one
    'value' => '($data->anAttribute > 10) ? "<a href=\"#\";><span class=\"icon-gift\"></span></a>" : "<a href=\"#\";><span class=\"icon-camera\"></span></a>"',
),

A complete example using bootstrap.widgets.TbGridView

$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'name-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'type' => 'striped bordered condensed',
'columns' => array(
    'id',
    'name1',
    'name2',
    'name3',
 
   array(
        'header' => 'custom',
        'type'=>'raw',
         'value' => '($data->field1 > 10) ? "<a><span class=\"icon-gift\"></span></a>" : "<a><span class=\"icon-camera\"></span></a>"',
    ),
...
)));

Enjoy! :)

Total 4 comments

#15278 report it
KonApaz at 2013/10/22 11:52am
Re: 15277

As I mentioned there were typo's

CGridview does not display the icons - only TbGridView(YiiBooster) does - because there is no css for these icons (neither the glyphicons) by default in yii (before version 1.1.14)

If you want to make it works for CGridview, you have to includes the specifics assets css and icons of Yii booster into your css and images folder and includes that in your project...

#15277 report it
YiiJeka at 2013/10/22 09:56am
Re: Pff

I meant that it:

array(
    //the header of the column
    'header' => 'custom',
    //make sure that the below text will be displayed as html
    'type'=>'raw',
    //make a logic decision: if 'anAttribute' value for each data-row is in a region values choose the first icon. Otherwise choose another one
    'value' => '($data->anAttribute > 10) ? "<a href=\"#\";><span class=\"icon-gift\"></span></a>" : "<a href=\"#\";><span class=\"icon-camera\"></span></a>"',
),

also works in CGridView, not only in the TbGridView(YiiBooster). And the tag span is not everywhere you closed. And you would have written how to do sorting and filtering options for the field "$data->field1 > 10" .

#15265 report it
KonApaz at 2013/10/22 06:11am
Re: Pff

Dear Evgeniy Tkachenko

I respect your opinion. Thanks also for your voting and the 'span closed' comment, there was a typo :)

What do you mean "... it works in CGridView" ?

#15264 report it
YiiJeka at 2013/10/22 03:43am
DEL

Pfft, it works in CGridView. What a noob wiki? And the span tag must be closed.

Leave a comment

Please to leave your comment.

Write new article