how to add standard textbox command to jqgrid context menu

Question

If context menu is added to jqGrid using Custom values to Context Menu Items in JQgrid and text filed inline editing is used, textbox standard context menu is not available, it is replace with jqGrid context menu.

How to add standard textbox context menu commands ( Undo, Cut, Copy, Paste, Delete, Select all ) to jqGrid conext menu or how to show standard context menu for textbox inline editing?

Update

On inline edit, if standard menu is opened by right clicking on yellow background or in autocomplete box and after that standard browser context menu is opened, custom menu is not closed, two menus appear.

How to fix this ?

Cavity

Answer 1

It's not easy to implement in context menu commands like "Copy", "Paste", ... so I decide to modify my demo from the answer on your previous question. In the new demo the context menu appears only if the page contains no selected text.

The first problem is that the original code of the jquery.contextmenu.js contains the following code fragment:

$(this).bind('contextmenu', function(e) {
  // Check if onContextMenu() defined
  var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  if (bShowContext) display(index, this, e, options);
  return false;
});

So the contextmenu handler return always false and prevent creating of the standard context menu. I fix the code to the following (you can download full modified code here):

$(this).bind('contextmenu', function(e) {
  // Check if onContextMenu() defined
  var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  currentTarget = e.target;
  if (bShowContext) {
    display(index, this, e, options);
    return false;
  }
});

The code of createContexMenuFromNavigatorButtons functions described here I modified

onContextMenu: function (e) {
    var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i,
        lastSelId;

    if (rowId && getSelectedText() === '') {
        ...
        return true;
    } else {
        return false; // no contex menu
    }
}

to use getSelectedText() and to create the context menu only if no text is selected. As the result you will be see your custom context menu only if no text is selected and see the standard context menu (which depend on web browser) if the text selection exist:

UPDATED: I modified my bug report about jquery.contextmenu.js with additional information based on the answer. I hope that the changes will be soon in the main code of jquery.contextmenu.js included in the plugins subdirectory.

UPDATED 2: How you can see here all the fixes are already in the main code of jqGrid on the github and in included in the jqGrid 4.3.

UPDATED 3: If you want to have the standard context menu for all enabled <input type="text" ...>, <input type="textarea" ...> and <textarea ...> elements you should just modify a little the code inside of onContextMenu callback. For example

onContextMenu: function (e) {
    var p = grid[0].p, i, lastSelId,
        $target = $(e.target),
        rowId = $target.closest("tr.jqgrow").attr("id"),
        isInput = $target.is(':text:enabled') ||
        $target.is('input[type=textarea]:enabled') ||
        $target.is('textarea:enabled');
    if (rowId && !isInput && getSelectedText() === '') {
        ...

see one more demo where inline editing will be activate by double-click.

Juarez

thank you very much. If text is not selected, paste and select all commands should be still available. How to add standard textbox context menu to the custom menu you created ? In this case both commands are available. – Cavity

@Andrus: I think it's not possible. – Juarez

Maybe it is possible to use solutions from #400712 or others? – Cavity

@Andrus: I seen the answer before, but the usage of Flash is not an option for me in the pure JavaScript solution. Moreover the standard context menu is absolutely different in different browsers. – Juarez

Thank you. Copy command can implemented using javascript prompt as described. How about implementing select all, paste, delete commands? It looks like everything can implemented in javascript. – Cavity

@Andrus: The accepted answer on the referenced question use Flash. I answered also on your another question before: "I think it's not possible". – Juarez

Thank you. If text is selected in inline edit, standard menu does not appear. How to force standard menu to appear in selected text in inine edit ? – Cavity

@Andrus: Do you probably mean <input type="text" .../>, <input type="textarea" .../> or <textarea ...> if you write about "inline edit". I posted you one more demo in the UPDATED 3 part of my answer. – Juarez

Thank you very much. If standard menu is opened after custom one, custom menu remains open. I updated question. How to fix this ? – Cavity