Custom HTML in dropdown menu

Tags: #<Tag:0x00007f0b08fdefc0>

Hi,

We are currently using server side pagination because of performance issues but because of this, filtering is limited to only what is loaded. I am trying to implement server side filtering using the built in dropdown menu. I’ve reviewed your documentation and am able to create custom items in the dropdown menu, but the functionality is fairly limited. If I try to add an input or a table, I cannot actually access it as when I move the mouse over it, it becomes highlighted and then as soon as I click the menu goes away. I’ve tried to use the “type” html as mentioned in the jQuery documentation here: http://swisnl.github.io/jQuery-contextMenu/docs/items.html, but this seems to have no effect. I’m wondering how I can override the default behavior of the dropdown menu so that I can create my own search as you type for server side filtering. Thanks.

Hi @jhassler

I had a sample demo that may help you to create an input type option in the menu. I’ll send it as soon as I find it.

I can make it work if I intentionally cause the default callback function to fail, but that’s not ideal and my custom html still gets highlighted as if it’s a selection. I tried having the callback return false but that had no effect.

Hey @jhassler

This is not a completed demo but it surely doesn’t still the click event https://jsfiddle.net/jmtbr4vc/

Hi @aleksandra_budnik

Thanks for the demo but unfortunately that doesn’t answer my question. In the demo you still cannot actually enter text into the input element. As soon as you click it to enter text it runs the callback function. I’ve tried using clickEvent.preventDefault() in the beginning of the callback but it doesn’t seem to do anything. What I would really like to do is create my own version of the “filter_by_value” option for the dropdown menu. I’ve looked through the handsontable source code but haven’t been able to find how that actually gets created.

There is no other way to handle menus in Handsontable. The callback is what you can use to put your own custom code.
Can you tell me what is a desired effect? I understand that you would like to keep the menu opened when a user types something in the input but what should happen after he types what he wanted?

I’d like to have a table with checkboxes for all available options for filtering, a search as you type input above to search those options, and a button below to trigger filtering based on the selected checkboxes. As it is right now, if you were to try to click a checkbox, the menu would just disappear.

Basically I want to create my own version of the “filter_by_value” option so that I can put my own filter values in there.

Currently there is no way to keep the menu opened while table recreates and it needs to recreate if you’d like it to filter value on the fly. You’d need to open an independent window (not a Handsontable element)