How to prevent TreeView Context Menu showing except on image element click?

[Marcus]

We have a text element on the left hand side, and a button on the right hand side of the treeview row.   We want to use a context menu which only gets activated when the blue image button is clicked.   What actually happens is the context menu is activated when we click anywhere on the treeview row (see picture attached).

We are using this nodetemplate in the RadTreeView with a context menu.

<NodeTemplate>
    <div style="width:100%;height:22px;">
        <span style="float:left;font-family:Arial;font-weight:bold;font-size:13px;">
        <%# DataBinder.Eval(Container, "Text") %>
        </span>
    <img class="treeGear" src="../img/gearsbluebtn.png" alt="Options" width="38px" height="22px" />
    </div>
</NodeTemplate>

 

How can we limit the context menu to only activate when the blue button is clicked? 

[Plamen]

Hello Marcus,

Here is the code that I added to the Context Menu demo that worked at my side:

   var imageClicked = false;
            function pageLoad() {
                var tree = $find("<%= RadTreeView1.ClientID %>");
                var nodes = tree.get_allNodes();
                for (var i = 0; i < nodes.length; i++) {

                    $telerik.$(nodes[i].get_textElement()).find(".pageNum").text(i + 1);

                    var imgTag = $telerik.$(nodes[i].get_textElement()).find(".treeGear");

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

            function onClientContextMenuShowing(sender, args) {
                if (!imageClicked) {
                    args.set_cancel(true);
                    imageClicked = false;
                }
.....

</Nodes>
                 <NodeTemplate>
                                   <div style="width: 100%; height: 22px;">
                                       <span style="float: left; font-family: Arial; font-weight: bold; font-size: 13px;" class="pageNum">
                                           <%# DataBinder.Eval(Container, "Text") %>
                                       </span>
                                       <img class="treeGear" src="../img/gearsbluebtn.png" alt="Options" width="38px" height="22px" />
                                   </div>
                               </NodeTemplate>
           </telerik:RadTreeView>

Hope this will be helpful.

Best wishes,
Plamen Zdravkov
the Telerik team

[Marcus]

Thanks Plamen, that's great!

I slightly changed it to the following as sometimes the flag was not reset, but solution is good Thanks!

function onClientContextMenuShowing(sender, args) {

    if (!imageClicked) {
        args.set_cancel(true);
    }

    imageClicked = false;
}