NlsMenu Pro
Integration to NlsTree Pro
NlsMenu Professional - Advanced Javascript Drop Down Menu Control

NlsMenu supports integration to NlsTree as advanced multilevel context menu. Below are steps to integrate the menu as context menu to NlsTree Pro

1. Includes the NlsTree extension for NlsMenu (nlsmenu_nlstree_intg.js)

<link rel="StyleSheet" href="nlsmenu/nlsmenu.css" type="text/css" /> <script language="javascript" src="nlsmenu/nlsmenu.js"></script> <script language="javascript" src="nlsmenu/nlsmenu_nlstree_intg.js"></script> </head>

2. Creates the menu

Creates the menu as described in Using NlsMenu Pro.

            var globalMenu = menuMgr.createMenu("global");
            globalMenu.addItem("1", "Menu Item 1");
            globalMenu.addItem("2", "Menu Item 2");
            globalMenu.addItem("3", "Menu Item 3");

            var nodeMenu = menuMgr.createMenu("nodelevel");
            nodeMenu.addItem("1", "Node Level Menu 1");
            nodeMenu.addItem("2", "Node Level Menu 2");

3. Set the menu as tree's global context menu or node level context menu

Use setNlsMenuAsGlobalCtxMenu() to set global context menu and setNlsMenuAsNodeCtxMenu() to set node level context menu.

            //to set tree's global context menu

            //to set node level context menu.
            t.setNlsMenuAsNodeCtxMenu("nodeid", nodeMenu);

4. Set tree's context menu event handler

By default NlsTree Pro use internal built-in context menu. To make the tree use extended context menu (NlsMenu), set the contextMenu event to nlsMenuAsContextMenu handler

            //set tree contextMenu event to new context menu event handler (using NlsMenu).
            t.contextMenu = nlsMenuAsContextMenu;

5. Set body onclick event to hide the context menu (OPTIONAL)

This step is optional, however it is recommended in order to close/hide opened context menu when clicking on anywhere on the document/page.

            <body onclick="menuMgr.hideMenus()">