Author Topic: Excel like Column Filtering  (Read 2175 times)

kshipra

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 94
    • View Profile
Excel like Column Filtering
« on: April 14, 2017, 01:05:29 am »
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.
« Last Edit: April 14, 2017, 01:55:55 am by kshipra »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Excel like Column Filtering
« Reply #1 on: April 14, 2017, 09:38:10 pm »
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'
               });
}