How to mimic fully functional (right click) context menu with <img/> tag in NodeTemplate.

[Shukhrat Nekbaev]

Hi,

In loaded event of tree I look through nodes and get reference to <img/> inside each node which is templated through <NodeTemplate>.I want the user to be able to left click on it and see context menu (same context menu as user can see by right clicking on any tree item). This is how I add 'onclick' handler to <img/>:

imgTag.click(nodes[i], function (e) {
    var menu = e.data.get_contextMenu();
    if (menu)
        menu.showAt(e.pageX, e.pageY);

    //$telerik.cancelRawEvent(e);
    e.stopPropagation();
});

Now when I click on img I can see the context menu, but no events are fired and obviously postback doesn't happen (regular right click based menu works as expected). I tried with treeView.showNodeContextMenu but it fails internally on get_contextMenu call.

How to fix that? :) Thank you!

Related posts with similar problems:
http://www.telerik.com/community/forums/aspnet-ajax/treeview/show-contextmenu-when-hovering-on-node-instead-of-right-click.aspx
http://www.telerik.com/community/forums/aspnet/treeview/show-context-menu.aspx

[Shukhrat Nekbaev]

Hi,

ok, after looking through js files of this and context menu controls in SDK I managed to make this work.

Solution:

imgTag.click(nodes[i], function (e) {
    var menu = e.data.get_contextMenu();
    if (menu) {
        e.data.get_treeView().showNodeContextMenu(e.data, e);
    }
});

P.S.: for those who might wonder why I don't cancel the event, well, it gets cancelled internally, so no worries :) Second parameter for showNodeContextMenu will also be used for 'left' and 'top' coords for menu (though getting e.target's properties), etc.