Cgridview, Filterselector And Custom External Search Fields

#1

Could someone please explain how the filterSelector property of CGridView works (perhaps with an example)? I understand that filterSelector is meant to allow you to specify the JQuery selector that jquery.yiigridview.js uses to identify filter fields, so that you can use additional external form fields and have them work the same way the internal search fields work. However, I’ve looked at the (very sparse) documentation, I’ve read every thread that references filterSelector, and I still don’t get it. Specifically, how does CGridView know which attribute/column you are trying to filter with your external form element?

I’ve tried everything I can think of, and I can’t get it to work.

Thanks.

#2

I was having the same confusion with trying to figure out how to get the filterSelector attribute to work. I got something working, so thought i’d post incase it can help others that end up here looking for answers like I did. I found that I could set a filter selector, but since the default filters inputs were being rendered, my custom filter input was not working. What I ended up doing was extending the CGridView class and altering the renderFilters method to check for a new constant so I could exclude the defaults.


Yii::import('zii.widgets.grid.CGridView');


class GridView extends CGridView

{

    const FILTER_POS_HIDDEN='hide';


    public function init()

    {

        parent::init();

    }


    public function renderFilters()

    {

        if($this->filterPosition===self::FILTER_POS_HIDDEN)

            return;


        parent::renderFilter();

    }

}

Then when I want to render the GridView widget, I pass in the filterSelector as well as a filterPosition set to ‘hide’. After that, I can insert my textfield where ever and it will work. So my view looks something like


$dataArray = array(

    'id'                => 'user-gridview',

    'filter'            => $model,

    'filterPosition'    => 'hide',

    'filterSelector'    => '#email-filter',

    'columns'           => $columns,

    'template'          => "{items}\n{pager}",

    'dataProvider'      => $dataProvider,

    'itemsCssClass'     => 'table table-bordered table-striped table-hover',

    'selectableRows'    => 2,

);

?>


<div class="col-md-12">

    <?php echo CHtml::textField('User[email]','',array('id' => 'email-filter', 'class' => 'form-action')); ?>

    <?php $this->widget('app.widgets.GridView.GridView', $dataArray); ?>

</div>

Without documentation, it was the best I could figure out. Maybe there is a much simpler way.

#3

If you want to adjust ‘old yii1 applications’ you can add the default generated ‘advanced search’ form to your cgridview filter with CGridView->filterSelector like so:

$this->widget('bootstrap.widgets.BsGridView',array(
	'dataProvider'=>$model->search(),
	'filterSelector'=>'.search-form input, .search-form select, {filter}',
	'template' => "{summary}\n{items}\n{pager}",
));

Now you can search by fields available within the ‘advanced search’ form, and additionaly filter using the filters available within the grid. Normally the filters within the grid will discard the ‘advanced search’.