RadContextMenu

[Kurt Boeckman]

I've created an asp.net user control that contains a HTML img tag and a RadContextMenu (see code below).  The user control is placed on a master page containing a number of content place holders.  Each place holder has a the user control contained within it.  Essentially, I have four instances of the user control sitting on a master page each with a RadContextMenu named titleBarContextMenu.  The img HTML element implements the OnClick event.  The Javascript is designed to show the context menu attached to the img HTML element the user just clicked.  The problem I'm having is the $find javascript command is finding the wrong RadContextMenu.  I used the Telerik samples as a guide on to make the context menu work.  Any ideas how I can find the correct RadContextMenu on the master page when the img HTML element is clicked?  Thanks in advance.

function

 

showMenu(e) {

 

 

var contextMenu = $find("<%= titleBarContextMenu.ClientID %>");

 

 

debugger;

 

 

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {

 

contextMenu.show(e);

}

$telerik.cancelRawEvent(e);

}

<

 

table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:24px; background-color:Transparent; white-space:nowrap; overflow:hidden; " >

 

 

<tr>

 

 

<td align="left" width="100%">

 

 

<asp:Label ID="paneTitleLabel" Font-Names="Arial" Font-Size="8pt" ForeColor="White" runat="server"></asp:Label>

 

 

</td>

 

 

<td>

 

 

<img src="/Images/Options_Idol.png" onmouseover="this.src='/Images/Options_hover.png'" onclick="showMenu(event)" onmouseout="this.src='/Images/Options_Idol.png'" alt="Web Part Menu" width="25px" />

 

 

 

</td>

 

 

<td align="right" valign="top">

 

 

<telerik:RadToolBar ID="radToolBarTitle" Runat="server" EnableEmbeddedSkins="false"

 

 

Font-Names="Arial" Font-Size="8pt" ForeColor="White" BorderWidth="0px" AutoPostBack="true">

 

 

<ExpandAnimation Duration="600" Type="InOutCubic"></ExpandAnimation>

 

 

<CollapseAnimation Duration="900" Type="InElastic"></CollapseAnimation>

 

 

 

</telerik:RadToolBar>

 

 

<telerik:RadContextMenu ID="titleBarContextMenu" runat="server" Skin="Vista" OnItemClick="titleBarContextMenu_ItemClick">

 

 

<Targets>

 

 

<telerik:ContextMenuControlTarget ControlID="radToolBarTitle" />

 

 

</Targets>

 

 

<Items>

 

 

</Items>

 

 

</telerik:RadContextMenu>

 

 

</td>

 

 

</tr>

 

</

 

table>

 

Telerik sample code:
http://www.telerik.com/help/aspnet-ajax/menu_contextmenus.html

[Kurt Boeckman]

I found a solution that works.  In the page load event of the user control I added the following code snippet:

this

 

.imgGearIcon.Attributes.Add("onclick", "showMenu(event, " + this.titleBarContextMenu.ClientID + ")");

Then I updated the Javascript showMenu function like this:

 

function

 

showMenu(e, menu) {

 

 

var contextMenu = $find(menu.id);

 

 

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {

 

contextMenu.show(e);

}

$telerik.cancelRawEvent(e);

}