Clear CGridView Filters, Sort & Pager

You are viewing revision #6 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#7) »

Clearing sorting and filters of CGridViews or derivatives when using methods to remember those filters is not very much covered. Here is an alternative.

I use ERememberFiltersBehavior and a previous wiki also shows a method to remember filters.

EButtonColumnWithClearFilters supposedly does the job, and a web page / forum entry also explain a method.

They did not meet my "requirements", so I worked out another method.

The code is not perfect yet (I would like to not use 'window.location.href'), but I thought sharing this is usefull for you. If you work out a better way, share it here!

The code basically goes like this:

// The usual pre-initialisation code for a CGridView.
$model=new MyModel('search');  // Code to set filters not shown.
$gridId='gridId'; // Id of the grid
$dataProvider=$model->search(); // Setup of data provider, may be more complex.

// Determine the JavaScript to reset the filters.
// 'window.location.href' should be improved upon but is ok in most cases.
$clearFilterData=CJavaScript::encode(
        array(
                'data' => array(
                        get_class($model) . '[]' => '',
                        $dataProvider->sort->sortVar => ' ',
                        $dataProvider->pagination->pageVar => 1 
                ),
                'url' => new CJavaScriptExpression('window.location.href') 
        ));
$jsClear=new CJavaScriptExpression("jQuery('#$gridId').yiiGridView('update',$clearFilterData);");

$clearButton=CHtml::link(Yii::t('app','bt.clear.filter'),'',array('onclick'=>$jsClear));

$this->widget('zii.widgets.grid.CGridView', array(
        'id'=>$gridId,
        //...
        'columns'=>array(
                //...
                array(
                        'class'=>'CButtonColumn',
                        'header'=>$clearButton,
                        'filterHtmlOptions'=>array(
                              'onclick'=>$jsClear,
                              'class'=>'clearFilter'
                         ),
                ),
         ),
     )
);

The resulting JavaScript code looks like this, in case you want to write it more directly:

[javascript]
jQuery('#gridId').yiiGridView('update',{data:{'MyModel[]':'','MyModel_sort':' ','MyModel_page':1},'url':window.location.href})

This seems less complex and more flexible than the other code I have seen. It also uses the actual sortVar and pageVar values (rather than supposing that they use the Model class name).

You can use the '$jsClear' JavaScript code any way you like (in the above, I use it to define a link (used in the CGridView header here), and to make the CButtonColumn filter zone clickable.

By setting the 'clearFilter' class on the 'filter' area of the CButtonColumn, you can suggest the clear filter function by attaching a background to it in your CSS.