<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">    
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxgrid.js"></script>
<script src="../../codebase/dhtmlxgridcell.js"></script>
<script src="../../codebase/excells/dhtmlxgrid_excell_link.js"></script>
<script src="../../../dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<script src="../../../dhtmlxMenu/codebase/ext/dhtmlxmenu_ext.js"></script>
 
 
 
<table>
    <tr>
        <td>
            <div id="gridbox" style="width:600px;height:270px;background-color:white;"></div>
        </td>
    </tr>
</table>
<script>
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++) {
        menu.hideItem(arr[i]);
    }
    switch (celInd) {
    case 0:
        ;
        menu.showItem("inc");
        menu.showItem("dec");
        break;
    case 1:
        ;
        menu.showItem("link");
        break;
    case 2:
        ;
        menu.showItem("link");
        break;
    case 3:
        ;
        menu.showItem("edit");
        break;
    case 4:
        ;
        menu.showItem("set_avail");
        menu.showItem("set_unavail");
        break;
    case 6:
        ;
        menu.showItem("del_best");
        menu.showItem("add_best");
        break;
    }
    return true;
}
menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.renderAsContextMenu();
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/dyn_context.xml");
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.enableContextMenu(menu);
mygrid.init();
mygrid.attachEvent("onBeforeContextMenu", onShowMenu);
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/gridH_03_context_menu.xml");</script>