Column Filter Callback

[RedBully]

Dear Sirs,

I have just upgraded from Pro 2.1.0 to 2.4.1
I have a callback on a header filter in my grid that has stopped working since the upgrade.

Please can you confirm the correct use of type and init callback functions because it is not clear in the documentation or examples that I have checked
http://paramquery.com/pro/api#option-column-filter
http://paramquery.com/pro/demos/filter_header_local

I am using the callback so that I can render a select dropdown using the Select2 jquery plugin
https://select2.github.io/

Here is part of my column model:

Code: [Select]

filter:
{
type: function (ui) { return oa.renderMultipleChoiceFilter(this, ui); },
init: function (ui) { oa.initMultipleChoiceFilter(this, ui); },
condition: 'range',
listeners: ['change']
}

where

Code: [Select]

oa.renderMultipleChoiceFilter(this, ui)
returns a string containing a '<select>.....</select>' element
and

Code: [Select]

oa.initMultipleChoiceFilter(this, ui);initialises the select2 functionality.

I have tried removing the init function and hardcoded a select statement in the type call back but it still does not work:

Code: [Select]

filter:
{
     type: function (ui) { return '<select><option value=1>Test</option></select>'; },
     condition: 'range',
     listeners: ['change']
}

Thanks for your help

[paramvir]

Please check these 2 fiddles as basic examples how to use select list filter in the header

1) Simple browser native select list with use of type: 'select'

filter: {
                  type: 'select',
                  condition:'equal',
                  options: ['','Exxon Mobil','Wal-Mart Stores'],
                  listeners:['change']
         }

http://jsfiddle.net/b6b710mz/91/

2) Augmented select list where init callback is used to convert select list into pqSelect.

Code: [Select]

             filter: {
                       type: 'select',
                       init: function () {
                            //this is select list node.
                            $(this).pqSelect({radio:true});
                       },
                       condition:'equal',
                       options: ['','Exxon Mobil','Wal-Mart Stores'],
                       listeners:['change']
                   }

http://jsfiddle.net/b6b710mz/93/

Hope it helps. If select list is not working in your case, then please post a jsfiddle so that I can check why it is so.

Additional notes:

When you use type as html string, then inbuilt listeners: ['change'] won't work and you have to bind change event to the select list on your own and call the filter method yourself. That would be quite an effort so type: 'select' is recommended over raw html string.

That being said if you have exceptional use case where you need to use only raw select list in html form which used to work earlier but it's not working now then please post a jsfiddle. I would be glad to help you on this.

[RedBully]

Hello

Thanks for your prompt reply.

My select drop down had two features that I was using::
1. I could select multple items in the dropdown and filter on all of those items
2. I could include optgroup in my select element
3. I was getting a dropdown that was consistent with my use of dropdowns throughout my site

I have two jsFiddles based on your own.  They are both the same but I have downgraded the paramgrid code in the second one to use  v2.1.0

http://jsfiddle.net/RedBully/b6b710mz/97/
http://jsfiddle.net/RedBully/0jm22cn0/6/

I have put in a simple select statement in the type call back.  It works in 2.1.0 but not in the later version

This samples are not complete but it does highlight the new paramgrid code not working with the callback functionality as expected.

I've attached a screenshot of my code working with v2.1.0 showing the use of the select2 dropdown in the filter with multiple option groups and filtering on multiple selected items.

[paramvir]

You can use all the mentioned features with type: 'select' without html string.

1) attr: "multiple" makes it multiple select list.

2) groupIndx adds grouping to select list based on optgroup.

I've created an example jsfiddle for you that contains both the above features.

http://jsfiddle.net/b6b710mz/100/

Though there seems to be an issue with filter.type: callback variant which prevents select2 from openiing, I've submitted it in the bug log, it would be fixed in the next version.

But I can't guarantee that select2 plugin would work seamlessly even after the fix as there should be an option in select2 to copy the name and classes from native select to its container which I couldn't see in select2 documentation unless I missed something. Probably you can throw more light on this.

Please note ( or I suppose that you might be already aware ) that there is an error in 2.1.0 with select2 too.

It is recommended to use pqSelect in pqGrid as it's not possible for us to test every plugin out there. If you miss or want to see more features in pqSelect, please let us know. We don't discourage using 3rd party plugins, in fact we design our API so that any plugin can be used but there are few basic requirements for a plugin to work in pqGrid, if it doesn't fulfill them, it gets difficult to help.

[RedBully]

Thank you for your reply.

My select2 code using 2.1.0 is working fine and the grid is filtered correctly based on my selection.  I've used the range condition and made sure that my option values match with the values in the grid cells.  (Although I'm using a special render method for the cells so that the option label is displayed instead of the option value)

My Options are currently supplied in JSON format as below which I think is incompatible with your pqselect.

Could you indicate when the bug fix/next version will be available because I don't want to spend a lot of time re-working my filter code if the bug fix means the pqgrid code works as it did in 2.1.0

Code: [Select]

"OptionGroups": [
            {
                "Label": "Group 1",
                "Options": [
                  {
                      "Label": "Red",
                      "Value": "1"
                  },
                  {
                      "Label": "Pink",
                      "Value": "2"
                  }
                ]
            },
            {
                "Label": "Group 2",
                "Options": [
                  {
                      "Label": "Brown",
                      "Value": "3"
                  },
                  {
                      "Label": "Orange",
                      "Value": "4"
                  }
                ]
            }


[paramvir]

Estimated time is 2-3 weeks. It would be great if you could please provide a test case ( functional jsfiddle with selects2 without errors in 2.1.0 ) so that I can include that in the regressions.

[RedBully]

Hello,

Sorry, I've not had time to put together a test for you.

However, I was finding that just returning an html string in the call back was failing to work:

Code: [Select]

...
"type", "function (ui) { return "<select><option>Option 1</option><option>Option 2</option></select>"; }
...

Do you have an update on the release of the latest version please?  I need to get my filter working now and so have to decide whether to rework my code to use your pqSelect or wait for the new version so that my workload is reduced.  I'd prefer to wait because it should mean less work for me but I need to get filtering working by end of this week either way.

[paramvir]

It seems it would take at least 2 more weeks for next release. If you wish, I can send you the latest build by end of this week though it won't be suitable for Production use.

[RedBully]

Yes please.  We are not in production yet but currently going through a testing phase.

[RedBully]

I've not received the build you said you would send and so I have updated my code to use pqSelect instead of select2.
This is now working though I would like to return to select2 when you bring out the next version.

I used both your API documentation and your demo example to help me update my code.  It was quite difficult and so might I suggest the following improvements to your API documentation that would have made my life easier:

- Explain what prepend does and how it must be used.  If you don't use prepend then your first option will appear to be pre-selected in the filter but not actually applied.  Also, you cannot deselect the first option.  The prepend object that you should use also varies depending on whether you want a single select or multiple select dropdown.  The demo gives examples of a key/value pair to use but the documentation does not explain what this means in the context of single select dropdown and multiple select dropdown.

- Make it clear that if using a filter type of 'select' then the value should be set to [] or null depending on whether a multiple select dropdown or single select dropdown is being used.

- Make it clear that attr='multiple' property is required if type='select' and multiple select drop down is required

- Make it clear what JSON structure is required for the 'options' if grouping is applied. An example on non grouping is given and the coder has to infer the structure.  The demo is using grid.getData which hides the structure and so an example of the actual JSON structure required would be very useful in the documentation.  I spent a lot of time wondering if my options JSON structure was correct because I had not used prepend and I was getting incorrect result.

Finally, I'd like to say the paramgrid is a fantastic product.  Powerful and very flexible.  If you could make the documentation a little better then it would truly be a first class product.

[paramvir]

Thanks for your valuable feedback. I've tried to address the documentation issues raised by you as under:

Explain what prepend does and how it must be used.  If you don't use prepend then your first option will appear to be pre-selected in the filter but not actually applied.  Also, you cannot deselect the first option.  The prepend object that you should use also varies depending on whether you want a single select or multiple select dropdown.  The demo gives examples of a key/value pair to use but the documentation does not explain what this means in the context of single select dropdown and multiple select dropdown.

prepend sub-option has been added in the documentation. In an HTML single select list, if no option is selected, the first option is selected by default which is as per the web standards. Please also refer to pqSelect specific documentation:
http://paramquery.com/pro/api/select#option-singlePlaceholder

Make it clear that if using a filter type of 'select' then the value should be set to [] or null depending on whether a multiple select dropdown or single select dropdown is being used.

Rather it's dependent upon filter condition. When filter.condition is "range", filter.value is an array of values and thus its initial value is [].

Make it clear that attr='multiple' property is required if type='select' and multiple select drop down is required

This is as per the design of native browser select list. It's mentioned in the docs that "attr property adds HTML attributes to the control."

When attr: "multiple" is applied to select it becomes <select "multiple" > that converts it into multiple select list. There are number of attributes in the context of different controls. Please refer to HTML documentation for list and description of all attributes for different controls.

Make it clear what JSON structure is required for the 'options' if grouping is applied. An example on non grouping is given and the coder has to infer the structure.  The demo is using grid.getData which hides the structure and so an example of the actual JSON structure required would be very useful in the documentation.  I spent a lot of time wondering if my options JSON structure was correct because I had not used prepend and I was getting incorrect result.

An example of JSON structure for grouping via groupIndx has been added.
http://paramquery.com/pro/api/#option-column-filter