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

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>