Dynamic context menu
In example below context menu is one for all columns, but it is shown differently by using hideButtons/showButtons menu methods.
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Dynamic context menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<script>
var myGrid, myMenu;
function doOnLoad(){
myMenu = new dhtmlXMenuObject();
myMenu.setIconsPath("../common/images/");
myMenu.renderAsContextMenu();
myMenu.attachEvent("onClick",onButtonClick);
myMenu.loadStruct("../common/dyn_context.xml");
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setImagePath("../../../codebase/imgs/");
myGrid.enableContextMenu(myMenu);
myGrid.enableAutoWidth(true);
myGrid.init();
myGrid.attachEvent("onBeforeContextMenu",onShowMenu);
myGrid.load("../common/gridH_03_context_menu.xml");
}
function onButtonClick(menuitemId){
var data=myGrid.contextID.split("_"); //rowInd_colInd
var rId = data[0];
var cInd = data[1];
switch(menuitemId){
case "add":
myGrid.addRow((new Date()).valueOf(),["","","","","","","",""],myGrid.getRowIndex(data[0]));
break;
case "delete":
window.setTimeout("myGrid.deleteRow("+rId+");",200);
break;
case "inc":
var value = parseFloat(myGrid.cells(rId,cInd).getValue())+100;
myGrid.cells(rId,cInd).setValue(value);
break;
case "dec":
var value = parseFloat(myGrid.cells(rId,cInd).getValue())-200;
myGrid.cells(rId,cInd).setValue(value);
break;
case "link":
var url = myGrid.getUserData(rId,"link");
if(url) window.open(url);
else alert("Page for this author wasn't set");
break;
case "edit":
var rIndex = myGrid.getRowIndex(rId);
myGrid.selectCell(rIndex,cInd);
myGrid.editCell();
break;
case "set_avail":
myGrid.cells(rId,cInd).setValue(1);
break;
case "set_unavail":
myGrid.cells(rId,cInd).setValue(0);
break;
case "del_best":
myGrid.cells(rId,cInd).setValue(0);
break;
case "add_best":
myGrid.cells(rId,cInd).setValue(1);
break;
}
}
function onShowMenu(rowId,celInd,grid){
var arr = ["inc","dec","link","edit","set_avail","set_unavail","del_best","add_best"];
for(var i = 0 ; i < arr.length; i++){
myMenu.hideItem(arr[i]);
}
switch(celInd){
case 0:
myMenu.showItem("inc");
myMenu.showItem("dec");
break;
case 1:
myMenu.showItem("link");
break;
case 2:
myMenu.showItem("link");
break;
case 3:
myMenu.showItem("edit");
break;
case 4:
myMenu.showItem("set_avail");
myMenu.showItem("set_unavail");
break;
case 6:
myMenu.showItem("del_best");
myMenu.showItem("add_best");
break;
}
return true
}
</script>
</head>
<body onload="doOnLoad()">
<h1>Dynamic context menu</h1>
<p>In example below context menu is one for all columns, but it is shown differently by using hideButtons/showButtons menu methods.</p>
<table width="772px">
<tr>
<td>
<div id="gridbox" style="width:100%;height:315px;background-color:white;"></div>
</td>
</tr>
</table>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.