Filtering on empty string

[kshipra]

In drop down filter in column, if there is blank, filtering does not work on empty string. How can I filter on empty values?

[paramvir]

"empty" is a separate filter condition. you would need to use custom filter in order to use "empty" along with any other filter condition.

Please use the below source code in this example: https://paramquery.com/pro/demos/filter_header_local

Code: [Select]

      filter: { type: 'select',
                //condition: 'equal',
                valueIndx: "ShipRegion",
                labelIndx: "ShipRegion",
                groupIndx: "ShipCountry",
                prepend: { '': '', '%empty%': 'Empty' },
                //listeners: ['change'],
//use custom listener.
listeners: [{'change': function(evt, ui){
grid.filter({
oper:'add',
data: [
{
dataIndx: ui.dataIndx,
condition: (ui.value=="%empty%"? "empty": "equal"),
value: ui.value
}
]
})
}}],
                init: function () {
                    $(this).pqSelect({ checkbox: true, radio: true, width: '100%' });
                }
        }


[kshipra]

I tried  code given by you in post, the basic filtering also stopped working. I think change event was not firing.

in load event I am populating filter options
 var npebsColumn = grid.getColumn({ dataIndx: 'NPEBS' });
 npebsColumn.filter.options = grid.getData({ dataIndx: ['NPEBS'] });
 npebsColumn.filter.cache = null;

so it is showing now empty string "" and "Empty" both in filter options.

When i looked in filter options the value for option is not getting populated. If Value gets populated then it will work without any custom stuff. I want to avoid custom filtering for basic filtering.

Following code works for empty or null string:


 var npebsColumn = grid.getColumn({ dataIndx: 'NPEBS' });
 npebsColumn.filter.options = grid.getData({ dataIndx: ['NPEBSVal', 'NPEBS'] });
 npebsColumn.filter.cache = null;




{
                title: "NPEBS",
                dataIndx: "NPEBS",
                width: 100,
                align: "center",
                filter: {
                    type: 'select',
                    prepend: { '': '--Select--' },
                    valueIndx: 'NPEBSVal',
                    labelIndx: 'NPEBS',
                    condition: 'equal',
                    listeners: ['change']
                   /* init: function () {
                        $(this).pqSelect({attr: "multiple", checkbox: true, radio: true, width: '100%' });
                    }*/
               
                // filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
                }},
                {
                    title: "NPEBSVal",
                    dataIndx: "NPEBSVal",
                    hidden: true,
                    width: 100,
                    align: "center"
                    },

Here  I have specify another column name like: NPEBSVal , then option value is getting set and filtering works properly.  But for that I will have to add one more unnecessary column which is not right.   I would like the filter options value and text to be initialized with same column name NPEBS which is currently not happening. How can i do that?

[paramvir]

Empty string "" in select options is reserved to clear the filter, hence the need to use custom filtering as mentioned in my previous post to filter by empty strings.

The select list options are as follows:

"": "--Select--" //this clears the filter.
"%empty%": "Empty" //used in custom filter callback to apply "empty" filter condition.
other options............

if it's not working for you, please share a test case via jsfiddle.

If you face any filtering issue other than empty filtering, please start a new thread.

[kshipra]

I tried with your sample code. EventCode column has Empty string filtering. Still having same issue

[kshipra]

Attached sample code. I see wrong zip file in my post.

[paramvir]

Your code is incorrect as you have added listeners directly to the column.

Correct way is to add it to the column.filter property as mentioned ( sample code ) in my previous post.

[kshipra]

Sorry... missed that. I have corrected the code as mentioned. Still not working. Am i missing something else?

[paramvir]

The context of filter listener is the control itself.

So this:

Code: [Select]

                                $(this).filter({
                                    oper: 'add',
                                    data: [
                                        {
                                            dataIndx: ui.dataIndx,
                                            condition: (ui.value == "%empty%" ? "empty" : "equal"),
                                            value: ui.value
                                        }
                                    ]
                                });


needs to be corrected to this:

Code: [Select]

$(this).closest(".pq-grid").pqGrid("filter",{
oper:'add',
data: [
{
dataIndx: ui.dataIndx,
condition: (ui.value=="%empty%"? "empty": "equal"),
value: ui.value
}
]
})


PS: Use of developer tools in your browser is indispensable to overcome such issues.

[kshipra]

Thanks now it worked!

I have not fully understood  how pqgrid works with my limited jquery skill.

Ideally I want to refer to instance of grid with 'this' keyword and call filter method. e.g. this.filter({}); since we are calling code in grid's column filter , But it does not work. 

With this code I think we are traversing DOM tags to get to pqgrid instance and access filter method inside the grid again ? Please explain
$(this).closest(".pq-grid").pqGrid("filter",{})

[paramvir]

To understand it please check jQuery documentation for closest method and different ways of calling pqGrid methods.

https://api.jquery.com/closest/

https://paramquery.com/pro/tutorial#topic-methods