Hi,
We use WebDataMenu as ContextMenu for Tree after migrating from UltraWebMenu. Tree was also changed from UltraWebTree to WebDataTree. But when clicking near the edge of the window old menu appears "smartly", managing to render itself completely inside the window. And new menus left upper angle appears always at the point of the click.
Here's the code:
Old function:
function UltraWebTree1_NodeClick(treeId, nodeId, button){ var node = igtree_getNodeById(nodeId); var tree = igtree_getTreeById(treeId); tree.setSelectedNode(node); if(button == 2){ igmenu_showMenu('UltraWebMenu1', tree.event); return true; } }
new function:
function WebDataTree1_NodeClick(sender, e) { if (e.get_browserEvent() != null && e.get_browserEvent().button == 2) { var menu = $find("WebDataMenu1");
if (menu != null) { e.set_cancel(true); menu.showAt(null, null, e.get_browserEvent()); return true; } } }
It's clear why the new menu (left side of the picture) draws so - it gets coordinates from e.get_browserEvent(). But how old menu managed to draw smartly? How to reproduce this behaviour?
I also attach screenshot file.
Hi Andrey,
I'm glad you solved your issue. If you have any other questions or concerns, please feel free to contact me.
Hello Nikolay,
Thanks for the recommendation. Using it I typed this code;
var x; if (sender.get_element().clientWidth > menu.get_element().clientWidth) { var offsetRight = sender.get_element().offsetLeft + sender.get_element().clientWidth; x = (e.get_browserEvent().clientX < offsetRight - menu.get_element().clientWidth) ? (e.get_browserEvent().clientX) : (offsetRight - menu.get_element().clientWidth);} else x = sender.get_element().offsetLeft; menu.showAt(x, e.get_browserEvent().clientY);
It there is not enough space to the right, it moves the menu exactly to fit into the window/frame (touching it's right edge). Otherwise it draws ContextMenu where the click happened. However if the window is narrower than the contextMenu, the conetxtMenu is drawn just touching the left side of the tree.
The same code is Ok for Y coordinate, but for me it was not necessary because of the scrolling feature of the tree.
Hello Andrey,
A possible solution would be to get the Y position from the browserEvent and the X position - from the tree element position. For example:
menu.showAt(sender.get_element().offsetLeft, e.get_browserEvent().clientY);
This will align the left border of the menu with the left border of the tree. You could also set some margin on the left by adding some space to X position, in order for the menu to appear in the center of the tree:
menu.showAt(sender.get_element().offsetLeft + 20, e.get_browserEvent().clientY);
If you have any questions regarding the matter, please let me know.