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

You are viewing revision #5 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#4)

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