JqGrid Context menu and sub menus - jqgrid

Question

I am using Jqgrid 4.5.4 version. To achieve right click context menu functionality I am using Jquery Plugin for right click context menus (http://www.trendskitchens.co.nz/jquery/contextmenu/).
My requirement is to show the sub menu inside main right click context menu. For example:
--------------------------
Delete
Add
Highlight > ---------------
Highlight doc1
Highlight doc 2
----------------
Edit
----------------------------
When I click on "Highlight" context menu option, sub menu opens up with "Highlight doc 1" and "Highlight doc 2". I could not achieve the same functionality with context menu plugin.
Could anyone please provide some solution.
Here is my code:
loadComplete : function(data) {
$("tr.jqgrow", this)
.contextMenu('rightClickMenu', {
bindings : createContextMenuBindings(),
onContextMenu : function(event) {
var rowId = $(event.target).closest("tr.jqgrow").attr("id");
return createContextMenu(myMap[rowId].ctxMenu);
}
});
}
function createContextMenuBindings() {
var bindings = {
'delete' : function(trigger) {
handleDelete(trigger.id);
},
'add' : function(trigger) {
handleAccept(codeType, trigger.id, true);
},
'highlight' : function(trigger) {
// This case I have to show sub menu with different options
}
};
return bindings;
}
function createContextMenu(ctxMenu) {
var menuItem = '';
if (ctxMenu != null) {
for ( var i = 0; i < ctxMenu.length; i++) {
if (ctxMenu[i].display) {
var subMenu = ctxMenu[i].subCtxMenu;
if(subMenu != null && subMenu.length > 0)
{
menuItem += "<li class='menuitem dropdown' id= "+ ctxMenu[i].handler + ">";
var ulTag = '<a class="btn btn-sm btn-link" data-toggle="dropdown">' + ctxMenu[i].name +
'<span class="caret"></span>'+
'</a>';
ulTag += "<ul class='subrowul dropdown-menu'>";
$.each(subMenu, function( index, value ) {
ulTag += "<li class='submenuitem' id= '"+ value.handler + "'>" + value.name + "</li>";
});
ulTag += "</ul>";
menuItem += ulTag;
}
else
{
menuItem += "<li class='menuitem' id= "+ ctxMenu[i].handler + ">" + ctxMenu[i].name;
}
menuItem += "</li>";
}
$('#rightClickMenu > ul li.menuitem').remove();
$("#rightClickMenu > ul").append(menuItem);
if (menuItem == '') {
return false;
} else {
return true;
}
}
I would appreciate your answers.
Thanks
UPDATE:
I am answering to my own question. I could able to integrate Jquery context menu to jqgrid. Now I could able to see menu and sub menus. I am attaching some code for anybody looking for the answer:
Below logic will be called after jqgrid load complete by row.
$.contextMenu({
selector: 'tr#'+rowId,
build: function($trigger, e){
// ctxMenu is rendered from server.
var ctxMenu = jqGridJsonResponseMap[code_type] [$trigger[0].id].rowInfo.ctxMenu;
// ctx menu options constructed for each row. It is dynamic based on each row.
var _items = getCtxMenuOptionsByRowId(ctxMenu, code_type, $trigger[0].id);
return {
callback: function(key, options) {
// each context menu has differnt callback
ctx_bindings[key](key, options, code_type);
},
items: _items
};
}
});