Filtering key-value column

Tags: #<Tag:0x00007f8b23e08228>
#1

I have a key-value column created with columnType = ‘handsontable’

Dropdown with handsontable is rendered and there are two columns key and value.

User choose one row and key is written to the data source.

Then there is a custom renderer which shows value instead of key in the cell.

Problem is that filter on this column shows keys and not values.

Is it possible to modify the filter to show values and filter by values?

#2

Hi Dan.

Filters plugin does not allow to alter dataset visible in the filter_by_value list.

#3

I think I am quite near. I can modify the render method of the dropdown filter item. But I don’t know how to achieve same functionality as the original render. Or how to modify the values list and then call the original render. I saw the values are stored in a array as value/visualValue pair and I need to modify the visualValue part.

        dropdownMenu: {
            items: {
                'filter_by_condition': {}, 'filter_operators': {}, 'filter_by_condition2': {}, 'filter_by_value': {
                    renderer: function renderer(hot, wrapper, row, col, prop, value) {
                        $(wrapper.parentNode).addClass('htFiltersMenuValue');
                        $(wrapper).append('<div class="htFiltersMenuLabel">' + value + '</div>');

                        if (!wrapper.parentNode.hasAttribute('ghost-table')) {

                        }

                        return wrapper;
                    }
                }, 'filter_action_bar': {}
            }
        },
#4

It does :slight_smile: The list is normal HOT so I can getSourceData and setSourceDataAtCell

SOLVED!

        afterDropdownMenuShow(instance) {
            var elements = instance.hot.getPlugin('filters').components.get('filter_by_value').elements[0];
            switch (instance.hot.colToProp(instance.hot.getSelected()[0][1])) {
                case 'Column_With_Key_Value_Data':
                    var data = elements.itemsBox.getSourceData();
                    data.forEach((item, index) => {
                        let newValue = yourFunctionToLookForValue(item.value) ;
                        elements.itemsBox.setSourceDataAtCell(index, 'visualValue', newValue);
                    });
                    break;
            }

        }
#5

That’s very clever. I wouldn’t think about that.
Thank you for sharing the update.

#6