Example of right click contextMenu and DataTables?

javapda

Does anyone have a working example of using Rodney Rehm's jQuery contextMenu plugin and DataTables?

There are many vague references to context menus (right-click on a row) in this forum, but looking for a concrete example.

On StackOverflow there is a question that could be related but the example provided does not seem to work.

Or, perhaps, you have an example of using an alternative context menu api (please, not bootstrap).

The following will work to intercept a right-mouse click:

"fnRowCallback": function(nRow) {
    console.log("fnRowCallback");
    $(nRow).on('mousedown', function(e){
    if( e.button == 2 ) { 
      console.log('Right mouse button!'); 
      return false; 
     } 
     return true; 
   });

but it was necessary to disable the document's context menu default behavior:

document.oncontextmenu = function() {return false;};

Thanks in advance.

javapda

The function for fnRowCallback takes a 2nd parameter which represents the underlying data. So it would be rewritten as:

"fnRowCallback": function(nRow,data,iDisplayIndex, iDisplayIndexFull) {

               console.log("fnRowCallback");

               $(nRow).on('mousedown', function(e){
                   if( e.button == 2 ) { 
                          //console.log("client (x,y) : ("+e.clientX+","+e.clientY+")");
                          doDynamicMenu(data["type"],{x:e.clientX,y:e.clientY});
                          return false; 
                        } 
                        return true; 
               });

Now you will see a call to doDynamicMenu function as shown below:

var myMenuHandler=function(key) {

  alert("do something with key: " + key);

};
var $mymenu = $( "<div class='my-menu'/>" );
$( "body" ).append( $mymenu );
$.contextMenu({
            selector: '.my-menu',
            callback: function(key, options) {
                myMenuHandler(key);
            },
            items: {
                    "edit": {name: "Edit", icon: "edit"},
                    "pdf": {name: "PDF Here", icon: "pdf"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: "quit"}
            }
            
        });
        $(".my-menu").contextMenu(pos);

allan

Sounds like you need to either use a delegated event, or the library you want to use should be updated to use a delegated event if it doesn't already have such an option.

Otherwise, the rowCallback method will work - but remember to only initialise the contact menu once. createdRow might be better suited.

Allan

javapda

Hello Allan,

Nice work with datatables!!

Hey, I looked over the sample your provide for delegate event.

It uses 'on' from jQuery. That would be great, just not sure how to trigger on 'right-click' vs. 'click'.

Any suggestions?

Thanks again.

tangerine

That's a jQuery question. Stackoverflow has answers, e.g.http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery/2725963#2725963 :