Hiding column's in YII CGridView

Question

I have a table with more than 5 columns , i want to hide some columns so that those column's are shown only if some row is selected or its expanded .

Am using yiiframework's CGridView , so how can i do this in that ?

Any help is appreciable ..

I want a feature like this, so that on expanding a particular record i can see the hidden column values

Answer 1

One way is :

 'columns'=>array(
        array(
          'name'=>'columnName',
          'visible'=>false
            ),
         )

So you need to manipulate visibility attributes dynamically :

 'visible'=>$this->checkVisible() //custom function 

sth like this depending on your requirement

Edit (using ajax +jquery)

example :views/user/admin.php

.....
.....
<?php
$toggleUDetails = <<<JS
 $('a.toggle').live('click',function(e){
    e.preventDefault();

    if(this.href.split('#')[1]=='loaded') return $(this).closest("tr").next('tr.toggle').toggle();

    trow=$(this).closest("tr");

   var ajaxOpts={type:"POST", url:this.href ,dataType:'json',success:function(data){
            $(trow).after(data.row);
      }
    };

   this.href=this.href+'#loaded';

   $.ajax(ajaxOpts);

  });
JS;
Yii::app()->clientScript->registerScript('toggleUD', $toggleUDetails, CClientScript::POS_READY); 

$this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'user-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
     array(
        'class'=>'CButtonColumn',
         'header'=>'Toggle Details',
          'template'=>'{toggle}',
            'buttons'=>array(
              'toggle'=>array(
                        'label'=>'Details',                        
                             'imageUrl'=>Yii::app()->request->baseUrl.'/images/expand.png',  
                             'url'=>'Yii::app()->createUrl("user/getExtra", array("id"=>$data->id))',
                             'options'=>array('class'=>'toggle',

                                      ),
                               ),
                        ),
          ),

        'id',
        'username',
        'password',
        'email',
        array(
            'class'=>'CButtonColumn',
        ),
    ),
)); ?>

User Controller

public function actionGetExtra($id){
        $model=User::model()->findByPk($id);
        echo json_encode(array('row'=> '<tr class="toggle"><td   colspan="6">'. $model->username.'</td></tr>'));

  }

Enable access rights:

array('allow', // allow authenticated user to perform 'create' and 'update' actions
                'actions'=>array('create','update','getExtra'),
                'users'=>array('@'),
            ),

that much I can do you for . Remember to change the Java script function to toggle the image icon I have not done that

Answer 2

'columns'=>array(
      array(
            'name'=>'columnName',
            'htmlOptions' => array('style' => 'display:none;'),
            'headerHtmlOptions'=>array('style' => 'display:none;'),
            'filterHtmlOptions'=>array('style' => 'display:none;'),
      ),
...