Monday, December 10, 2012

Make Different Cells css row or cells column in CGridView Yii

CGridview is one of the most powerful tools that you can do with generating table in Yii framework.But sometimes you want to include your own data into Columns properti as parameter to check data with the columns data that came from external sources.

The way you can do is creating the new gridview with the external data addition in the end. You can extend grid view with your own data and then place this code to the Components in yiiframework.


Yii::import('zii.widgets.grid.CGridView');
class GridViewWithVariable extends CGridView {
    public $params;
}
And then name it as GridViewWithVariable.php in components. And then you can create the new  array in your GridView like this

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider'=>$dataProvider,
    'params'=>$params,
    'columns'=>array(
        'title',         
        'category.name',  
        'content:html',   
        array(            
            'name'=>'val',
            'value'=>'in_array(val,$this->grid->params)',//you can access your variable like this
        ),
        array(            
            'name'=>'authorName',
            'value'=>'$data->author->username',
        ),
        array(            
            'class'=>'CButtonColumn',
        ),
    ),
));

If you want to create different css in row you can create your custom Css like this. This is the gridview that created from CSqlDataProvider so you have to access your data via array like $data["DirekturID"].

$this->widget('GridViewWithVariable', array(
    'dataProvider' => $dataProvider,
    'params' => $arrNotResponsibleDirektur,
    'columns' => array(
        array(
            'name' => 'Direktur',
            'value' => '$data["Direktur"]',
            'cssClassExpression' => 'in_array($data["DirekturID"],$this->grid->params)?"normal":"merah"',
            'htmlOptions'=>array('width'=>'300px'),

        
        ),
        array(
            'name' => 'Yes',
            'type' => 'raw',
            'value' => '$data["ResponID"]=="1"?"✓":""',
            'cssClassExpression' => '"yes"',
            'htmlOptions'=>array('width'=>'40px'),
        
        ),
        array(
            'name' => 'No',
            'type' => 'raw',
            'value' => '$data["ResponID"]=="2"?"✓":""',
            'cssClassExpression' => '"no"',
            'htmlOptions'=>array('width'=>'40px'),
        
        ),
        array(
            'name' => 'Partially True',
            'type' => 'raw',
            'value' => '$data["ResponID"]=="3"?"✓":""',
            'cssClassExpression' => '"partially-true"',
            'htmlOptions'=>array('width'=>'40px'),

        
        ),
        array(
            'name' => 'Not applicable',
            'type' => 'raw',
            'value' => '$data["ResponID"]=="4"?"✓":""',
            'cssClassExpression' => '"not-applicable"',
            'htmlOptions'=>array('width'=>'40px'),

        
        ),
        array(
            'name' => 'Jawaban',
            
            'value' => '$data["Jawaban"]',

        ),
    )
));
And you can see the result here : You can use also "rowCssClassExpression" to use with different css color in CGridView row