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.