Hide a column in CGridView


I have read some topics about this issue:

  • “hidden values in CGridView”

  • “How to hide a column in CGridView”

  • “Many hidden columns problem in CGridView”

But none of them brings me exactly the solution that I am looking for.

The code for the hidden column that I am using is:


     'value' => '$data->id',

     'headerHtmlOptions' => array('style' => 'display:none'),

     'htmlOptions' => array('style' => 'display:none'),


However, this code does not hide the correspondent cell in the filter row, as shown in the attached picture:

Is there something similar to:

'filterHtmlOptions' => array('style' => 'display:none'),

in order to hide the filter cell of the column?


How about setting the visible property http://www.yiiframework.com/doc/api/1.1/CGridColumn#visible-detail and for the filter http://www.yiiframework.com/doc/api/1.1/CDataColumn#filter-detail

Thanks but that does not work. ‘visible’ property deletes the column so that their values are not available for javascript operations.

My clients don’t need to see a primary key id displayed in their data, so I needed the id value to be there, but neither the header nor the data column to be displayed.

I used jquery to hide the id column in my grid.

    jQuery(function($) {


         * Need to hide the id column


        grid = $('#level-grid');

        $('tr', grid).each(function() {

            $('td:eq(0), th:eq(0)',this).hide();



This method doesn’t require any changes to the controller or the model, The header row is lined up normally.

I decided that for my projects, I or others don’t need and ID column so I just got rid of it.

You probably could also use a CSS to hide the columns so it still be hidden without JavaScript.

To remove the filter you just need to set the filter property to false…

CGridView already stores the primary key values in the generated page… you can get the primary key value for the selected row(s) with $.fn.yiiGridView.getSelection()

Thanks a lot.

I’m also running into this problem. You can use headerHtmlOptions / htmlOptions to “display:none;”, but it doesn’t hide the filter. I want to be able to show/hide columns on the fly.

Removing the filter is not an option; and using the visible switch doesn’t leave data accessible for javascript.

Thought about using javascript to hide on page load, but that seems real messy, and might not look fantastic in all browsers.

I have the same problem. Any better solution than using extra js to hide the column?

You did not explain which problem so I assume you are referring to the previous post… and you cannot hide the "filter" filed…

For this you can set the filter cell manually instead of leaving the gridView to create it automatically…

for example:

'filter'=>CHtml::activeTextField($model, 'name', array('id'=>false,'style'=>'display:none')),

It does not hide the correspondent cell in the filter row, as shown in the attached picture of post #1, there is an additional green cell on the right. I have the same problem with #1, namely, I need something like

'filterHtmlOptions' => array('style' => 'display:none'),

It works, but when I use the filters of other columns, since ajax refresh the whole table, the hidden columns appear again.

I changed the above codes into a function:

function hide_column(){

    grid = $('#client_table');

    $('tr', grid).each(function() {

        $('td:eq(5), th:eq(5), td:eq(6), th:eq(6), td:eq(7), th:eq(7), td:eq(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />, th:eq(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />',this).hide();




and set the CGridView afterAjaxUpdate property:

<?php $this->widget('zii.widgets.grid.CGridView', array(


    'afterAjaxUpdate'=>'function(id, data){hide_column();}',


Anyway, it is too complicated to deal with such a little problem.


this is great to know.

Can you tell me where did you find this $.fn.yiiGridView.getSelection()

Thank you very much

This method is mentioned under the CGridView::selectableRows property http://www.yiiframework.com/doc/api/1.1/CGridView#selectableRows-detail

It’s located in the framework/zii/widgets/assets/gridview/jquery.yiigridview.js file.

We need to have hidden fields in our columns for id columns in the database which can be accessible in the $_REQUEST so database can be manipulated. For this there is a simple solution which is as follows:

In any column which is visible to user one can have many hidden fields using the concatenation operator:






            'CHtml::hiddenField(\'array_available_in_request[\'.$row.\']["id"]\', $data["id"]) .

            CHtml::hiddenField(\'array_available_in_request[\'.$row.\']["parent_id"]\', $data["ParentId"]) .

            CHtml::textField(\'array_available_in_request[\'.$row.\']["field_name"]\', $data["field_name"], array("style"=>"width:50px;"));'


One slight adjustment to meet the initial requirements of the question. This retains the hidden_field_name filter value by attaching it to the filter of the field_name column.





            'filter' => CHtml::activeTextField($model, 'field_name')

                        . CHtml::activeHiddenField($model, 'hidden_field_name')


How about setting the style="width:0px;" as needed on the column? Not sure where to do that because it would depend on Why to hide the column (isGuest?, isPageTwo?, etc.)

If you want to pass data to your javascript and are filling the grid using a CSqlDataProvider, then you could take advantage of the way the CGridView handles the id’s.

In the sql for CSqlDataProvider there must be a field called ‘id’ for the grid to work. But this id can be anything. So to pass e.g. ‘statusfield’ to javascript, you could write something like:

(in a model)

public static function listMyItems() {

  return new CSqlDataProvider(

    "select concat(id, '_', statusfield) id, other, fields from myitems",



(in a view)

$this->widget('zii.widgets.grid.CGridView', array(

    'dataProvider' => MyModel::listMyItems(),

    'columns' => array('other','fields'),

    'selectableRows' => 1,

    'selectionChanged' => 'dosomejavascript');

(in javascript)

function dosomejavascript(gridid) {

    var id=$.fn.yiiGridView.getSelection(gridid);

    if (id.length==0) return; //user de-selected the row

    var info = id[0].split('_');

    console.log('original id', info[0]);

    console.log('statusfield', info[1]);