Toggle Column visibility in Yii Framework

Question

I'm using the CGridView widget to get data (39 columns) from a model, but the Table its way to large, i need to add a button to toggle some columns visible or not (lets say 20), maybe with jQuery, but i have no idea where to start, any ideas would be appreciated!

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'contacts-grid',
    'itemsCssClass' => 'table table-striped table-bordered table-hover table-checkable table-responsive ',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(

         'patient_id',
         'first_name',
         'last_name',
         'sex',
         'birth_date',
         'home_phone',
         'work_phone',
         'city',
         'email_address',
         'patient_balance',
         'last_date_seen',
         'date_entered',
         'first_visit_date',
         'charges_mtd',
         'charges_ytd',
         'status',

         /* Hide/Show this ones */
         'next_regular_appointment',
         'next_preventive_appointment',
         'cancelled_appointments',
         'failed_appointments',
         'address_1',
         'address_2',
         'state',
         'zipcode',
         'responsible_party',
         'compute_0013',
         'compute_0014',
         'marital_status',
         'responsible_party_status',
         'prim_employer_id',
         'sec_employer_id',
         'policy_holder_status',
         'patient_status',
         'next_recall_date',
         'salutation',
         'receive_email',
         'ortho_patient',
         'preferred_name',
         'middle_initial'
    ),
)); ?>

Answer 1

To „catch“ your columns they must be identified in some way. E.g. you can add class. To do so instead of

'zipcode',

you can write

array (
    'name' => 'zipcode',
    'cssClassExpression' => '"collapsable"',
),

Then you need to register jQuery script similar to:

Yii::app()->clientScript->registerScript( 'collapse-table-columns', '
    $("#your_clickable_element").click(function(e){
        e.preventDefault();
        $("table .collapsable").toggleClass("collapsed");
    });
', CClientScript::POS_READY );

And finally CSS – in your stylesheet, or inline:

Yii::app()->clientScript->registerCss( 'collapsable-columns', '
    table .collapsed {display:none}
' );

Then add a link or smth. which will toggle collapse:

<a id="your_clickable_element" href="#">toggle</a>

Thats's it. NB code is not tested, this is just possible algorithm. Also you must collapse your header/footer cells if they exist.