CGridView styling specific column, inserting <div> inside <td> elements - php

Question

I’m trying to apply custom styling to specific columns generated by CGridView. I need to insert inside the elements, but I can’t figure out how to do it.
Here is the view file:
<div id="shortcodes" class="page">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Available Products</h2>
</div>
</div>
</div>
<!-- End Title Page -->
<!-- Start Product Section -->
<div class="row">
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'products-grid',
'dataProvider' => $dataProvider,
'ajaxUpdate' => TRUE,
'pager' => array(
'header' => '',
'cssFile' => false,
'maxButtonCount' => 25,
'selectedPageCssClass' => 'active',
'hiddenPageCssClass' => 'disabled',
'firstPageCssClass' => 'previous',
'lastPageCssClass' => 'next',
'firstPageLabel' => '<<',
'lastPageLabel' => '>>',
'prevPageLabel' => '<',
'nextPageLabel' => '>',
),
'columns' => array(
'id',
'name',
'category',
'brand',
'weight_unit',
'price_unit',
'flavors',
array(
'name' => 'providers',
'htmlOptions' => array('class' => 'label label-info'),
),
),
));
?>
</div>
<!-- End Product Section -->
</div>
</div>
So I want to style the column named “providers”. Using htmlOptions does add the class to the td column, but the alignment of the column is getting out of place. That’s why I wanted to wrap it inside a <div>, to apply the proper alignments and styling.
Right now it appears like this:
<tr class="even">
<td>414</td>
<td>Owl Book</td>
<td>Night Owl Trance</td>
<td>Binaural Beats</td>
<td> 400 Grams</td>
<td>$569.66</td>
<td>Ether</td>
<td class="label label-info">Shrooms.com</td>
</tr>
What I was looking to do is this:
<tr class="even">
<td>414</td>
<td>Owl Book</td>
<td>Night Owl Trance</td>
<td>Binaural Beats</td>
<td> 400 Grams</td>
<td>$569.66</td>
<td>Ether</td>
<td><div class="label label-info">Shrooms.com</div></td>
</tr>
So, how would I do this? Is there an option for it? As far as I know, htmlOptions will only add attributes to the element.

Answer 1

Not tested, but I think you can use something like this.
'flavors',
array(
'name' => 'providers',
'value' => "<div class=label label-info>$data->providers</div>"
),

Answer 2

Ok, i first tried redGREENblue's answer, but i gives a Undefined variable: data
'value' => ''.$data->providers.'',.
Then after some advice in the Yii forums i found the solution. Basically what i did was return the value from within a function closure, and it worked,
The working code ::
<div id="shortcodes" class="page">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Available Products</h2>
</div>
</div>
</div>
<!-- End Title Page -->
<!-- Start Product Section -->
<div class="row">
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'products-grid',
'dataProvider' => $dataProvider,
'filter' => $dataProvider->model,
'ajaxUpdate' => TRUE,
'pager' => array(
'header' => '',
'cssFile' => false,
'maxButtonCount' => 25,
'selectedPageCssClass' => 'active',
'hiddenPageCssClass' => 'disabled',
'firstPageCssClass' => 'previous',
'lastPageCssClass' => 'next',
'firstPageLabel' => '<<',
'lastPageLabel' => '>>',
'prevPageLabel' => '<',
'nextPageLabel' => '>',
),
'columns' => array(
'id',
'name',
'category',
'brand',
'weight_unit',
'price_unit',
'flavors',
array(
'name' => 'providers',
'value' => function($data) { //*the closure that works*
return '<div class="label label-info">'.$data->providers.'</div>';
},
'type' => 'raw',
),
),
));
?>
</div>
<!-- End Product Section -->
</div>