How to create jqGrid Context Menu?

Question

I am trying to create a context menu on jqGrid (for each row) but can't find how to do so.I am currently using jQuery Context Menu (is there a better way? )but it is for the entire Grid not for a particular row i.e. cannot perform row level operations for it. Please help me in this, thanks.

$(document).ready(function(){ 
  $("#list1").jqGrid({
    sortable: true,
    datatype: "local", 
    height: 250, 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
        {name:'id',index:'id', width:60, sorttype:"int"}, 
        {name:'invdate',index:'invdate', width:90, sorttype:"date"}, 
        {name:'name',index:'name', width:100}, 
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, 
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, 
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, 
        {name:'note',index:'note', width:50, sortable:false} 
        ], 
    multiselect: true,
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager1', 
    sortname: 'id', 
    recordpos: 'left', 
    viewrecords: true, 
    sortorder: "desc",
    caption: "Manipulating Array Data"
  });
  $("#list1").jqGrid('navGrid','#pager1',{add:false,del:false,edit:false,position:'right'});

  $("#list1").contextMenu({
        menu: "myMenu"
    },
        function(action, el, pos) {
        alert(
            "Action: " + action + "\n\n" +
            "Element ID: " + $(el).attr("id") + "\n\n" +
            "X: " + pos.x + "  Y: " + pos.y + " (relative to element)\n\n" +
            "X: " + pos.docX + "  Y: " + pos.docY+ " (relative to document)"
            );
    });

score 17 · Accepted Answer · edited Feb 03 '14 at 15:13

There are many context menu plugins. One from there you will find in the plugins subdirectory of the jqGrid source.

To use it you can for example define your context menu with for example the following HTML markup:

<div class="contextMenu" id="myMenu1" style="display:none">
    <ul style="width: 200px">
        <li id="add">
            <span class="ui-icon ui-icon-plus" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Add Row</span>
        </li>
        <li id="edit">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Edit Row</span>
        </li>
        <li id="del">
            <span class="ui-icon ui-icon-trash" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Delete Row</span>
        </li>
    </ul>
</div>

You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the <table>):

loadComplete: function() {
    $("tr.jqgrow", this).contextMenu('myMenu1', {
        bindings: {
            'edit': function(trigger) {
                // trigger is the DOM element ("tr.jqgrow") which are triggered
                grid.editGridRow(trigger.id, editSettings);
            },
            'add': function(/*trigger*/) {
                grid.editGridRow("new", addSettings);
            },
            'del': function(trigger) {
                if ($('#del').hasClass('ui-state-disabled') === false) {
                    // disabled item can do be choosed
                    grid.delGridRow(trigger.id, delSettings);
                }
            }
        },
        onContextMenu: function(event/*, menu*/) {
            var rowId = $(event.target).closest("tr.jqgrow").attr("id");
            //grid.setSelection(rowId);
            // disable menu for rows with even rowids
            $('#del').attr("disabled",Number(rowId)%2 === 0);
            if (Number(rowId)%2 === 0) {
                $('#del').attr("disabled","disabled").addClass('ui-state-disabled');
            } else {
                $('#del').removeAttr("disabled").removeClass('ui-state-disabled');
            }
            return true;
        }
    });
}

In the example I disabled "Del" menu item for all rows having even rowid. The disabled menu items forward the item selection, so one needs to control whether the item disabled one more time inside of bindings.

I used above $("tr.jqgrow", this).contextMenu('myMenu1', {...}); to bind the same menu to all grid rows. You can of course bind different rows to the different menus: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

I didn't read the code of contextMenu careful and probably the above example is not the best one, but it works very good. You can see the corresponding demo here. The demo has many other features, but you should take the look only in the loadComplete event handler.

Awesome! Definitely going to be implementing this in my instance of jQGrid — FastTrack, Mar 13 '12 at 17:24
@FastTrack: I suggested later some add-ons to the context menu. See for example [the demo](http://www.ok-soft-gmbh.com/jqGrid/CreateContextmenuFromNavigatorButtons3.htm) from [the answer](http://stackoverflow.com/a/8460480/315935) and some other. See [the post](http://www.trirand.com/blog/?page_id=393/feature-request/jquery-ui-compatible-version-of-jquery-contextmenu-js/#p25532) also. — Oleg, Mar 13 '12 at 17:41
there should be a way to implement this solution in JqGrid for PHP, too. [here](http://stackoverflow.com/questions/21532308/jqgrid-php-righ-click-context-menu) is the question — Jess Stone, Feb 03 '14 at 16:20
@Oleg - thanks! this method works well for me as well, but I have one issue - the inline style rules for the ul element ("width:200px") seem to be overwritten somehow. I see this happening in your example as well. Any way to get around this? (My context menu options are longer) — froadie, Jan 04 '16 at 21:09
@froadie: You are welcome! The answer is really old. For example making **separate binding** of `conetxMenu` to every `tr.jqgrow` is not good. It's better to bind the event to `` element once. Moreover one have now new versions of jQuery UI, moreover there are two forks of jqGrid: [free jqGrid](https://github.com/free-jqgrid/jqGrid) which I develop and [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) which Tony develop. There are two close plugins in https://github.com/free-jqgrid/jqGrid/tree/master/plugins. It would be better if you post separate question with all details — Oleg, Jan 04 '16 at 21:24
@Oleg - thanks for the quick response, will try to formulate a new question — froadie, Jan 04 '16 at 21:30
@Oleg - http://stackoverflow.com/questions/34607798/how-can-i-set-up-a-contextmenu-for-my-jqgrid — froadie, Jan 05 '16 at 09:08

2GDev · Answer 2 · 2011-07-07T08:28:23.920

5

you can have a look at the onRightClickRow event

JqGridWiki

jQuery("#gridid").jqGrid({
...
   onRightClickRow: function(rowid, iRow, iCol, e){ 
      //Show context menu ...

   },
...
})

From Wiki ... onRightClickRow

Event Name

onRightClickRow

Parameters

rowid, iRow, iCol, e

Information

Raised immediately after row was right clicked. rowid is the id of the row, iRow is the index of the row (do not mix this with the rowid), iCol is the index of the cell. e is the event object. Note - this event does not work in Opera browsers, since Opera does not support oncontextmenu event

edited Jul 07 '11 at 08:28

answered Jul 07 '11 at 08:11

2GDev

2,478
1
20
32

how would I inflate context menu here? – U.P Jul 07 '11 at 08:48
If you can find a contextMenu with a show() method you could use it in the rightclickevent. Or another solution is to create a own div and call $('div').show() when user right click the row... – 2GDev Jul 07 '11 at 08:57
So I guess there is no context menu in jqGrid. There is one example of ASP.NET MVC code with ContextMenu but I can't find its equivalent in simple jQuery. http://www.trirand.net/examples/functionality/contextmenu/default.aspx – U.P Jul 07 '11 at 09:05
you could use the same approach.. 1) Assign a class to each row 2) attach the context menu to all DOM element with that class 3) On the ContextMenu function(action, el, pos) get the row data like you do now ($(el).attr("id")) – 2GDev Jul 07 '11 at 09:16
I might have to cater half a million rows (at occasions). Won't this approach be a bit expensive? – U.P Jul 07 '11 at 09:25

score 1 · Answer 3 · answered May 26 '14 at 06:26

You can try this :

jQuery("#yourid").jqGrid({

...

{name:'req_name',index:'req_name', width:'9%', sortable:true},

.....

 loadComplete:function(request){

...

               $("[aria-describedby='yourid_req_name']", this).contextMenu('myMenu1',{ 
                    onContextMenu: function(e) {
                        var rowId = $(e.target).closest("tr.jqgrow").attr("id");
                            $("#send").html('<a onclick="send_email('+rowId+')">Send Email</a>');
                            return true;    
                    }
                });
},

........... and the html code :

<div class="contextMenu" id="myMenu1" style="display:none">
        <ul style="width: 400px">
            <li id="send">
                <span>Add Row</span>
            </li>
        </ul>
    </div>

How to create jqGrid Context Menu?

3 Answers3

Event Name

Parameters

Information

Linked