Custom html Drop-down in Context menu

Tags: #<Tag:0x00007f8b1dcad190>
#1

I am able to add custom html dropdown in context menu. On change of user selection from that dropdown i want to perform some operation.

Below is the snippet.
“custom”: {
name: ' <select> <option value="test1">Test1</option> <option value="test2">Test2</option> <option value="test3">Test3</option> <option value="test4">Test4</option> </select> ',
callback: function(key, options) {
console.log('key '+JSON.stringify(key));
console.log('options '+JSON.stringify(options));
},
disabled: true,

When i do not add “disabled: true”, i can see logs being printed on console. But it happens on every click of drop down, not allowing to select anything. When i add “disabled: true”, i am able to select the options from dropdown, but nothing happens. Even the logs inside callback does not get printed(I want to call some custom method on change of selection from drop down).

Is there any way to achieve this?

#2

Hey @shradhag510

Maybe you could just create a submenu, like here https://jsfiddle.net/1nt7t429/ ?

#3

Thanks @aleksandra_budnik for your response.

In the sample shared, there is custom operation defined for every item in sub menu(Changing some particular color on particular selection);
As per my requirement the options in the drop down will be dynamic and also instead of sub menus, i need just a single drop down. On selection of any value in drop down, i want to call a single method which will perform some operation on the basis of selected value.

Is there any way which can capture the change in drop down selection event?

#4

I do not have a demo that has the same settings, but in either way, this is still a custom implementation.

To block the closing of the menu after clicking the select options you should be able to use beforeOnCellMouseDown hook (using preventDefault() or stopImmediatePropagation() method)

#5