RadContextMenu as a popup, controlled by serverside codebehind..

[Johan]

ASPX
   <script type="text/javascript">
    //<![CDATA[
          function showMenuAt(e) {
              var contextMenu = $find("RadContextMenu1.ClientID");
              var x = parseInt($get("contextX").value);
              var y = parseInt($get("contextY").value);


              if (isNaN(x) || isNaN(y)) {
                  alert("Please provide valid integer coordinates");
                  return;
              }

              contextMenu.showAt(x, y);


              $telerik.cancelRawEvent(e);
          }


          function showMenu(e) {
              var contextMenu = $find("RadContextMenu1.ClientID");


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


              $telerik.cancelRawEvent(e);
          }
    //]]>
    </script>

      <Telerik:RadContextMenu id="RadContextMenu1" runat="server"
         EnableRoundedCorners="true" EnableShadows="true">
                <Items>
                    <Telerik:RadMenuItem Text="Trees" />
                    <Telerik:RadMenuItem Text="Sunset" />
                    <Telerik:RadMenuItem Text="Mountains" />
                </Items>
            </Telerik:RadContextMenu> 


And from VB.net codebehind I try to SHOW the popup. 
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "reloadamchart" & Guid.NewGuid.ToString, "showMenu(e);", True)

Another tricky part is that Google Map right_click gives you map coordinates lat/lng insted of the client pixel where the right click took place. I gues all clients will have different screen resolutions making this very difficult ?    

'This is example of what I would like to accomplish using RadContextMenu.

http://googlegeodevelopers.blogspot.se/2009/09/introducing-contextmenucontrol-10-give.html 
http://econym.org.uk/gmap/example_context.htm 

[Johan]

bump !!!!!!

[Peter]

Hello Johan,

Can you elaborate on what exactly you need to achieve? Why do you need to show the menu from a server event? Isn't it possible to use a client event as in this demo? The challenge with the server-side approach is passing the client event object to the showMenu(e) function.


All the best,
Peter
the Telerik team

[Johan]

We need to be able to show the radcontextmenu from code behind at x,y pixel. This is a map application with a google map in a <div>. We can catch a users rightclick on the map clientside and be able to interact with the user and give him more options when the user clicks a google map marker.  So we want to be able to show the radcontextmenu on this event.  The map and it's map markers is not a  standard asp/ajax controls so we cant attach the radcontextmenu to a ContextMenuControlTarget ControlID..  We have the same problem for radtooltip that we very much would like to use too.

We need to be able to show the radcontextmenu on a specific x,y pixel..

thats why we think this javascript looked promising.

  function showMenuAt(e) {
              var contextMenu = $find("RadContextMenu1.ClientID");
              var x = parseInt($get("contextX").value);
              var y = parseInt($get("contextY").value);


              if (isNaN(x) || isNaN(y)) {
                  alert("Please provide valid integer coordinates");
                  return;
              }

              contextMenu.showAt(x, y);


              $telerik.cancelRawEvent(e);
          } 

And somehow fire the javascript from codebehind like this  ( we tried many ways..please advise with a small sample project how to
use the radcontextmenu from serverside) 

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "cmenu" & Guid.NewGuid.ToString,"RadContextMenu1.ClientID.showAt(300, 900);", True)

Or 
    'ScriptManager.RegisterStartupScript(Page, Page.GetType(), "cmenu" & Guid.NewGuid.ToString, "document.getElementById(RadContextMenu1.ClientID).show=true;", True)

or 

    'e.MapCommand = "document.getElementById('" & RadContextMenu1.ClientID & "').show=true;"
    ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "AJAX" & Guid.NewGuid.ToString, "document.getElementById('RadContextMenu1.ClientID').show=true;", True)

or 

    'ScriptManager.RegisterStartupScript(Page, Page.GetType(), "cmenu" & Guid.NewGuid.ToString, "RadContextMenu1.ClientID.showAt(300, 900);", True)

or 

    'ScriptManager.RegisterStartupScript(Page, Page.GetType(), "cmenu" & Guid.NewGuid.ToString, "document.getElementById(RadContextMenu1.ClientID).show=true;", True)

or
       ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "AJAX" & Guid.NewGuid.ToString, "document.getElementById('RadContextMenu1.ClientID').show=true;", True)

[Peter]

Hi Johan,

The following code should do the trick:

<form id="form1" runat="server">
   <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
   </telerik:RadScriptManager>
   <asp:button id="Button1" runat="server" text="Button" onclick="Button1_Click" />
   <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
       <Items>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
               <Items>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                   </telerik:RadMenuItem>
                   <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                   </telerik:RadMenuItem>
               </Items>
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
           </telerik:RadMenuItem>
       </Items>
   </telerik:RadContextMenu>
   </form>

protected void Button1_Click(object sender, EventArgs e)
   {
        ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "cmenu", "function pageLoad(){$find('RadContextMenu1').showAt(100, 100);}", true);
   }

Greetings,
Peter
the Telerik team

[Johan]

Thanks Peter this works !