Example of right click contextMenu and DataTables?

Example of right click contextMenu and DataTables?

javapdajavapda Posts: 3Questions: 1Answers: 0
edited October 2014 in Free community support

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

Answers

  • javapdajavapda Posts: 3Questions: 1Answers: 0
    edited October 2014

    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);
    
  • allanallan Posts: 52,268Questions: 1Answers: 7,958 Site admin

    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

  • javapdajavapda Posts: 3Questions: 1Answers: 0

    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.

  • tangerinetangerine Posts: 2,650Questions: 21Answers: 302
This discussion has been closed.