DHTMLX Docs & Samples Explorer

### Menu Items Manipulations

Add New Item
Item Type |  |
Parent |  | (Click menu to select)
Item Text |  |
Item Has Icon |  |
Icon Source |  |
|  | Remove Item
Item |  | (Click menu to select)

Source

    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxmenu_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxmenu.js"></script>
    <script src="../../codebase/ext/dhtmlxmenu_ext.js"></script>

    <div style="height: 250px;"><div id="menuObj"></div></div>
    <div>
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <th colspan="3" style="padding-bottom: 10px;">Add New Item</th>
                        <tr>
                            <td>Item Type</td>
                            <td width="10">&nbsp;</td>
                            <td><select id="add_type"><option value="0">Child</option><option value="1">Sibling</option></select></td>
                        </tr>
                        <tr>
                            <td>Parent</td>
                            <td>&nbsp;</td>
                            <td><div id="item_parent" style="font-weight: bold;">(Click menu to select)</div></td>
                        </tr>
                        <tr>
                            <td>Item Text</td>
                            <td>&nbsp;</td>
                            <td><input id="item_text" type="text" value=""></td>
                        </tr>
                        <tr>
                            <td>Item Has Icon</td>
                            <td>&nbsp;</td>
                            <td>
                                <span><input id="icon_exists" type="checkbox" checked></span>
                                <span><img id="icon_src" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>Icon Source</td>
                            <td>&nbsp;</td>
                            <td>
                                <span><img onclick="changeIcon(this, 'copy');" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
                                <span><img onclick="changeIcon(this, 'cut');" width="18" height="18" border="0" src="../common/imgs/cut.gif"></span>
                                <span><img onclick="changeIcon(this, 'new');" width="18" height="18" border="0" src="../common/imgs/new.gif"></span>
                                <span><img onclick="changeIcon(this, 'paste');" width="18" height="18" border="0" src="../common/imgs/paste.gif"></span>
                                <span><img onclick="changeIcon(this, 'print');" width="18" height="18" border="0" src="../common/imgs/print.gif"></span>
                                <span><img onclick="changeIcon(this, 'redo');" width="18" height="18" border="0" src="../common/imgs/redo.gif"></span>
                                <span><img onclick="changeIcon(this, 'undo');" width="18" height="18" border="0" src="../common/imgs/undo.gif"></span>
                                <span><img onclick="changeIcon(this, 'save');" width="18" height="18" border="0" src="../common/imgs/save.gif"></span>
                                <span><img onclick="changeIcon(this, 'select_all');" width="18" height="18" border="0" src="../common/imgs/select_all.gif"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td><input type="button" value="Add Item" style="margin-top: 10px;" onclick="addItem();"></td>
                        </tr>
                    </table>
                </td>
                <td width="30">&nbsp;</td>
                <td valign="top">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <th colspan="3" style="padding-bottom: 10px;">Remove Item</th>
                        <tr>
                            <td>Item</td>
                            <td>&nbsp;</td>
                            <td><div id="item_id" style="font-weight: bold;">(Click menu to select)</div></td>
                        </tr>
                        <tr>
                            <td colspan="3" align="center"><input type="button" value="Remove Item" style="margin-top: 10px;" onclick="removeItem();"></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

    <br>
    <script>var menu;
    function initMenu() {
        menu = new dhtmlXMenuObject("menuObj");
        menu.setIconsPath("../common/imgs/");
        menu.attachEvent("onClick", changeParent);
        menu.loadXML("../common/dhxmenu.xml?e=" + new Date().getTime());
    }
    var itemImg = "copy";
    function changeIcon(obj, icon) {
        document.getElementById("icon_src").src = obj.src;
        itemImg = icon;
    }
    var parentId = null;
    function changeParent(id) {
        parentId = id;
        var text = menu.getItemText(id);
        document.getElementById("item_parent").innerHTML = id + " (" + text + ")";
        document.getElementById("item_id").innerHTML = id + " (" + text + ")";
    }
    var itemId = 0;
    function addItem() {
        if (parentId == null) {
            alert("Please select parentId");
            return;
        }
        var itemText = document.getElementById("item_text").value;
        if (itemText.length == 0) {
            itemText = "New Item";
        }
        var img = "";
        var imgDis = "";
        if (document.getElementById("icon_exists").checked) {
            img = itemImg + ".gif";
            imgDis = itemImg + "_dis.gif";
        }
        var opts = document.getElementById("add_type");
        if (opts.options[opts.selectedIndex].value == "0") {
            menu.addNewChild(parentId, 0, "item_" + itemId, itemText, false, img, imgDis);
        } else {
            menu.addNewSibling(parentId, "item_" + itemId, itemText, false, img, imgDis);
        }
        itemId++;
        parentId = null;
        document.getElementById("item_parent").innerHTML = "(Click menu to select)";
        document.getElementById("item_id").innerHTML = "(Click menu to select)";
    }
    function removeItem() {
        if (parentId == null) {
            alert("Please select itemId");
            return;
        }
        menu.removeItem(parentId);
        parentId = null;
        document.getElementById("item_parent").innerHTML = "(Click menu to select)";
        document.getElementById("item_id").innerHTML = "(Click menu to select)";
    }</script>