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

You are viewing revision #4 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.

« previous (#3)next (#5) »

  • 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! :)