MultiSelect filter

[queensgambit9]

I have a column where the data is structured like:

cell1: value1, value2, value3
cell2: value1, value2
cell3: value1


I would like to have a multiselect filter for this column based on the values that are comma separated, ex: value1 applied on above data will return 3 matches, value3 will return 1 match etc

Would this be possible?

[paramvir]

filter.condition = 'contain'  could be used for this.

https://paramquery.com/pro/api#option-column-filter

[queensgambit9]

Im using that currently (textbox), but I would like to have a multiselect dropdown where its populated with each individual value...
I use multiselect on other columns (one value in each cell) but can't figure it out how to solve it when you have several values in one cell.

[queensgambit9]

Trying:

Code: [Select]

{title:"Test", width:100, align: "left", dataIndx: "Test", hidden: false, filter: { type: 'select',
                         condition: 'contain',
                         options: [ {"test": "test"}],
                         listeners: ['change'],
                               init: function () {
                            $(this).pqSelect({ checkbox: true, width: '100%', multiplePlaceholder: 'TEST', maxDisplay: 0 });
                        },                       
                         }}
But the filter is not applied correctly...

[paramvir]

It's more of a javascript related question than a grid related one.

options in filter drop downs are usually filled with getData method, for example the options for ShipRegion are filled in load event in this example: https://paramquery.com/pro/demos/filter_header_local

In your case getData would fill the options from cell values as:

value1, value2, value3
value1, value2
value1

But you want them as

value1
value2
value3.

So you need to write custom javascript to iterate through all rows in dataModel.data and fill cell values in array, then get unique comma separated values.

Code: [Select]

  var arr=[], obj={};
  //get cell values.
  grid.option("dataModel.data").forEach(function(rd) {
arr.push(rd.rank);
  })
 
  //get unique values.
  arr.join(",").split(",").forEach(function(val){
  obj[val]=true;
  })
  arr = Object.keys(obj);
 
  //fill in filter options.
  var filter = grid.getColumn({dataIndx:'rank'}).filter;
  filter.options = arr;
  filter.cache = null;
  grid.refreshHeader();

http://jsfiddle.net/bv2kffqk/

[queensgambit9]

Thanks, seems to work with one value.
When you selected multiple values no match is returned...?

[paramvir]

You need to write a custom filter condition for that.

Code: [Select]

condition: function(val, filterBy){
  //write your custom condition here.
},

Example of custom filter: https://paramquery.com/pro/demos/filter_custom

[queensgambit9]

Thanks, works fine.
I have empty values but cannot filter on them currently...what would be the best approach to get empty values filterable?

[paramvir]

Filtering on empty values is discussed in this post:

https://paramquery.com/forum/index.php?topic=2110.0

[queensgambit9]

In v5.1.0 there seem to be possible to filter on empty values if you use prepend: { '': ''},?
Problem is then filter heading says 1 of 5 but there is only 4 to choose from.
You still need custom condition? How is implemented when using range?

Code: [Select]

{title:"test", width:10, dataIndx: "abc", hidden: true,

        filter: {
        type: 'select',
        attr: "multiple",
        condition: 'range',
        valueIndx: "abc",
        labelIndx: "abc",
        value: [],
        style:'height:30px;',
        prepend: { '': ''},
         listeners: ['change'],

        init: function(ui) {
            ui.$editor.pqSelect({ checkbox: true, width: '100%', multiplePlaceholder: 'FILTER', maxDisplay: 0 });
            }
        }                 
            },


[paramvir]

Empty values in range condition is supported since old versions.

https://paramquery.com/pro/demos24/filter_header_local ( column shipping Region )

Range condition looks for exact match of multiple values but data in your case is in non standard format, hence the need for custom filter condition.

Please share a plnkr of what you have implemented so far and I would add in it how to look for empty values.

[queensgambit9]

Thanks.

https://plnkr.co/edit/2nz955I1uKQCGjgM1zmc?p=preview

[paramvir]

There are few issues in your plnkr.

1. Range condition works with strings ( dataType: 'string' ) only.

2. rank is dataType:"integer"; rank: "" is invalid value for an integer. It can be an integer or null or undefined.

Isn't that you had mentioned values like below at beginning of your thread.

cell1: value1, value2, value3
cell2: value1, value2
cell3: value1

[queensgambit9]

Sorry, should be corrected now. I want to have the possibility to filter empty values in rank.

[paramvir]

Empty doesn't work with numbers currently, we are enhancing filtering and it would be supported (range empty, etc for numbers) in the upcoming versions.

If rank is a string column, then empty can be used as in this example https://plnkr.co/edit/ClsPusyvXYJkBAMHCKgn?p=preview