Cgridview Styling Specific Column, Inserting <Div> Inside The <Td> Elements

Yii 1.1 General Discussion
1

Hi, I’m trying to apply custom syling to specific columns generated by CGridView. I need to insert <div> inside the <td> 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. Thats 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 htmloption will only add attributes to the <td> element Any help would be appreciated.

Thanks,

Maxx

2

Something like this should work:




                'columns' => array(

                    'id',

                    'name',

                    'category',

                    'brand',

                    'weight_unit',

                    'price_unit',

                    'flavors',

                    array(

                        'name' => 'providers',

                        'value' => function($data) { return '<div class="label label-info">'.$data->providers.'</div>' },

                        'type'=>'raw',

                    ),

                ),
3

you dont have to pass in a callback just concatenate them togethher


'columns' => array(

                    'id',

                    'name',

                    'category',

                    'brand',

                    'weight_unit',

                    'price_unit',

                    'flavors',

                    array(

                        'name' => 'providers',

                        'value' => '<div class="label label-info">'.$data->providers.'</div>',

                        'type'=>'raw',

                    ),

                ),
4

Wow that works flawlessly! Very useful option indeed. Thanks a lot for your help, it literally was a life saver.

5

Hi, Thanks for your answer. I first tried your solution, but got a PHP notice ::




Undefined variable: data

'value' => '<div class="label label-info">'.$data->providers.'</div>',

So i tried andy_s’ solution later on and it worked. Thanks again for your help, i really appreciate it.

6

ye, but callbacks are more powerful :)

your example should look like this to work (looks a little messy to me):




'value' => '"<div class=\"label label-info\">".$data->providers."</div>"',