jquery - How can I set up a contextMenu for my jqGrid?

Question

I have a jqGrid for internal use on our site that lists all our users. On each user/row, I would like to be able to apply various options (depending on the data in that row). Instead of adding navbuttons to the pager, it would make more sense to have a context menu that appears on right-click of a row.

We currently have this jQuery contextMenu plugin imported on our site, so it would be preferable to somehow integrate that into my jqGrid.

My jqGrid scaled down to basics looks something like this:

$("#users").jqGrid({
    datatype: 'json',
    url: 'myMethodURL',
    gridview: true,
    colModel: [
        {name: 'id', label: 'User ID', hidden:true},
        {name: 'lastname', label: 'Last Name'},
        {name: 'firstname', label: 'First Name'},
        {name: 'status', label: 'Status', stype: 'select', searchoptions: {value: ':All;ACTIVE:Active;INACTIVATED:Inactive;PENDING APPROVAL:Pending Approval;'}},
        ... more fields ...
      ],
    height:'auto',
    autowidth:true,
    caption:'Users',
    rowNum:20,
    rowList:[10,20,50],
    sortorder:'asc',
    sortname: 'lastname',
    ignoreCase: true, // case-insensitive filtering
    pager: '#pager',
    jsonReader: {
        root: "ROWS", //our data
        page: "PAGE", //current page
        total: "TOTAL", //total pages
        records:"RECORDS", //total records
        cell: "", //not used
        id: "0" //will default first column as ID
    },
    postData: postData
});
$("#users").jqGrid("filterToolbar", {searchOnEnter: true});

Some of the options I need in the context menu:

1. Activate OR Inactivate (depending on if user is currently active/inactive - basically need a toggle)
2. Process pending user (should ONLY show up if user status is "pending")
3. Edit user info
4. Send reset password link

How can I set up a context menu with variable options (dependent on that particular row's values), and define what happens when an option is clicked?

Answer 1

In general the usage of the jQuery contextMenu plugin with jqGrid seems to me very simple. You can just bind the menu to the grid body. One need just know that the rowid is the value of id attribute of <tr> element and tr elements which have the real data have the class .jqgrow.

Thus the code could be like below

$("#users").jqGrid({
    datatype: 'json',
    ...
}).contextMenu({
    selector: ".jqgrow", 
    build: function ($trigger, e) {
        // this callback is executed every time the menu is to be shown
        // its results are destroyed every time the menu is hidden
        // e is the original contextmenu event

        var $tr = $(e.target).closest("tr.jqgrow"),
            rowid = $tr.attr("id"),
            item = $grid.jqGrid("getRowData", rowid);

        // item contains now the data of the row and we can
        // build the context menu dynamically
        if (item.status === "ACTIVE") {
            return {
                callback: function (key, options) {
                    var m = "clicked: " + key + " on rowid=" + rowid +
                            " (" + item.firstname + " " + item.lastname + ")";
                    alert(m); 
                },
                items: {
                    edit: {name: "Edit", icon: "edit"},
                    cut: {name: "Cut", icon: "cut"},
                    copy: {name: "Copy", icon: "copy"},
                    paste: {name: "Paste", icon: "paste"},
                    delete: {name: "Delete", icon: "delete"},
                    sep1: "---------",
                    quit: {name: "Quit", icon: function($element, key, item) {
                            return 'context-menu-icon context-menu-icon-quit';
                          }}
                }
            };
        } else {
            return {
                callback: function (key, options) {
                    var m = "clicked: " + key + " on rowid=" + rowid +
                            " (" + item.firstname + " " + item.lastname + ")";
                    alert(m); 
                },
                items: {
                    delete: {name: "Delete", icon: "delete"},
                    sep1: "---------",
                    quit: {name: "Quit", icon: function($element, key, item) {
                            return 'context-menu-icon context-menu-icon-quit';
                          }}
                }
            };
        }
    }
});

See the demo https://jsfiddle.net/OlegKi/37rb593h/. You can modify the code of build callback to any your requirements.