Reputation: 83213
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:
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?
Upvotes: 3
Views: 2191
Reputation: 222017
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.
Upvotes: 2