context-js icon indicating copy to clipboard operation
context-js copied to clipboard

Input or select field

Open musicman3 opened this issue 4 years ago • 4 comments

Hello. How can I make an option or an input field in this menu? I need to insert these options into the context menu sections. It is also not clear how to bind a menu to a table row by id

musicman3 avatar Feb 02 '21 10:02 musicman3

Hello. How can I make an option or an input field in this menu?

You can't at the moment. I will consider this and maybe it will be possible to choose a type of menu item to render (text, inputbox etc...)

"It is also not clear how to bind a menu to a table row by id"

Do you want each table row to have different context menu?

image

const dataTable = document.getElementById('data-table');
let contextMenu = null;

dataTable.addEventListener('contextmenu', e => {
    e.preventDefault();

    if (contextMenu != null) {
        contextMenu.hide();
        contextMenu.uninstall();
    }

    contextMenu = new ContextMenu(document.body, [{
        text: 'Remove row',
        onclick: ee => {
            if (e.target.parentElement.tagName == 'TR') {
                e.target.parentElement.parentElement.removeChild(e.target.parentElement);
            }
        }
    }, ]);

    contextMenu.install();
});

heapoverride avatar Feb 03 '21 16:02 heapoverride

or maybe just passing html for a menu entry?

Risingson avatar Feb 04 '21 20:02 Risingson

Thanks. Need to pass html to menu cell

musicman3 avatar Feb 04 '21 21:02 musicman3

or maybe just passing html for a menu entry?

Not sufficient if you want the data to persist but it's great to have suggestions so they can be tried. ContextMenu is rebuilt every time it is requested.

heapoverride avatar Feb 08 '21 18:02 heapoverride