RadContextMenu as a popup, controlled by serverside codebehind..

6 posts, 0 answers
  1. Johan
    Johan avatar
    6 posts
    Member since:
    May 2012

    Posted 28 May 2012 Link to this post

    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 
  2. Johan
    Johan avatar
    6 posts
    Member since:
    May 2012

    Posted 30 May 2012 Link to this post

    bump !!!!!!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 31 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Johan
    Johan avatar
    6 posts
    Member since:
    May 2012

    Posted 31 May 2012 Link to this post

    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)

  6. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 05 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Johan
    Johan avatar
    6 posts
    Member since:
    May 2012

    Posted 06 Jun 2012 Link to this post

    Thanks Peter this works !
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017