Filters for fields with comma delimited values

Tags: #<Tag:0x00007efc6adb0ea8>
#1

Hello,

I have a column that contains comma delimited values such as this:

----------------------------------
|  Column A                      |       
----------------------------------
| Value A, Value B, Value C      | <= R1
----------------------------------
| Value B, Value C, Value D      | <= R2
----------------------------------

When I use the filters, the options are this:
Value A, Value B, Value C
Value B, Value C, Value D

How can I change that behavior so that the filters display the comma delimited values?
Value A,
Value B,
Value C,
Value D.

Thank you,
Erick

#2

Hi @software

For the filters, your cell value is Value A, Value B, Value C and this is the same value that you would get by calling getDataAtCell method.

To get the list of those options separated you would need to construct your own option in the dropdown menu. Here https://jsfiddle.net/cxygpLr9/ is a construction of a custom dropdown menu.

The second part of the task would be to define what happens when you filter out a single value. Do you hide the whole row or change a cell value and remove the option?

#3

Hi Aleksandra,

I would like to return the values that contains a single value. In the above example I would like to return R1 when Value A is selected from the filter values.

Thank you,
Erick

#4

Hi Aleksandra,

After looking into this a bit more. I think that what you are suggesting is to:

1.- Create a custom filter by value option in the menu where I can set the options separately.
2.- Activate this custom filter on certain columns.

Is there a tutorial that explains how to do something like this?
I’m looking at this demo: https://handsontable.com/docs/8.3.1/demo-filtering.html

Also, what methods is the custom filter needs to implement? How did you know that the hidden method could be overridden on the jsfiddle?

Thank you for all your help,
Erick

#5

Hi Aleksandra,

Last reply of the day, lol. I started toying around with the idea that you suggested. Here is the example:
https://jsfiddle.net/ag8mfcLq/3/

How do I bind the eventListeners to the functions onInputChange and onCheckboxChange?

Thanks for your patience,
Erick

#6

Hi @software
You can base your component on the same schema we create our built-in components for filters. The only change you need there is a _getColumnVisibleValues() method: https://github.com/handsontable/handsontable/blob/master/src/plugins/filters/component/value.js#L216-L220

Moreover, you have also to prepare logic to compare values. Even contains conditional might not help you there.

Referring to your jsfiddle demo from the last comment: you try to use functions that are not available in that context, so in the runtime, they are not defined (in devtools’ console, you will get that error). If you put them out of the configuration object, your code will run.

#7