Excel like Column Filtering

[kshipra]

How  can I provide excel like column filtering with ability to select or search. I believe it can be done with pqselect .

 I have configured column as below:
{
                title: "Visibility",
                width: 100,
                dataIndx: "Visibility",
                filter: {
                    type: 'select',
                    cls: 'VisibilityFilterSelector',
                    condition: 'equal',
                    valueIndx: "Visibility",
                    labelIndx: "Visibility",
                    prepend: { '': '--Select--' },
                    listeners: ['change']
                }
            }

and then in getData

 getData: function (response) {

                    $grid.pqGrid("option", "dataModel.data", response.data);

                    var visibilityColumn = $grid.pqGrid("getColumn", { dataIndx: "Visibility" });
                    var visibilityFilter = visibilityColumn.filter;
                    visibilityFilter.cache = null;
                    visibilityFilter.options = $grid.pqGrid("getData", { dataIndx: ["Visibility", "Visibility"] });

                 
                    var vopts = this.getData({ dataIndx: ["Visibility", "Visibility"] });
                    console.log(vopts);
                    var $selVis = $(".VisibilityFilterSelector");
                   
                    // console.log($selVis);
                    $selVis.val(vopts);
                    $selVis.pqSelect({
                        checkbox: true,
                        multiplePlaceholder: 'select Visibility',
                        maxDisplay: 1,
                        search: true,
                        width: 'auto'
                    });
                   

                    $grid.pqGrid("refresh");
\}

But I am not getting pqselect in filter of column header.

[paramvir]

Please follow this example: https://paramquery.com/pro/demos/filter_header_local

you need to set the options in load event.

And in filter.init you need to write this:

Code: [Select]

init: function () {
               $(this).pqSelect({
                        checkbox: true,
                        multiplePlaceholder: 'select Visibility',
                        maxDisplay: 1,
                        search: true,
                        width: 'auto'
               });
}