Sort/filter outside pjaxed GridView

Hi there!

I have a standard Gridview wrapped into Pjax:




<?php Pjax::begin(); ?>

    <?= GridView::widget([

        'dataProvider' => $dataProvider,

        'filterModel' => $searchModel,

        'columns' => [

            'id',

            'reference',

            'title',

        ]

    ]); ?>

<?php Pjax::end(); ?>



it works as intended, there are sorting column headers and filter inputs.

Now, I need to have a separate dropdown somewhere outside GridView, that should filter GridView using a different field:




<?= Html::dropDownList('Model[active]', null, [0 => 'Only active', 1 => 'Only non-active']) ?>



($searchModel knows about ‘active’ field. When I include this column inside GridView, built-in filter works).

Question: how my custom dropdown can reload Pjaxed GridView with additional filter by ‘active’ field, but keeping filters/sorting that was already applied to a GridView? (and vise versa, GridView built-in filtering should respect additional filtering parameters).

I tried this:




    $('#testButton').on('click', function(e) {

        $.pjax({ 

            url: '/controller/index',

            data: {'Model[active]': '1'},

            container: '#w0'

        });

        e.preventDefault();

    });



It works (shows only active records on testButton press), but resets all other filters/sorting for GridView. I feel there should be a better way.

Sorted this out - as I thought, this was a super easy thing to do. All you need is to use ‘filterSelector’ parameter in GridView. This will include additional custom inputs in the process, with same functionality as GridView embedded filters.