Set position of RadContextMenu

9 posts, 0 answers
  1. Robin
    Robin avatar
    4 posts
    Member since:
    Sep 2011

    Posted 07 Mar 2012 Link to this post

    Dear Support-Team,

    is it possible to set the position of the RadContextMenu in the "OnClientShowing"-Event?
    Even if it has been opened by right-click?
    I want to show the ContextMenu on a defined position and need its width.
    This is not possible with the ShowAt() Function because the width of the ContextMenu is not available.

    To show the ContextMenu at the right side of a tablerow i would like to do something like this:

    tmpTr is the clicked tr element.

    contextMenu.showAt(tmpTr.position().left + tmpTr.width() - [CONTEXTMENUWIDTH], tmpTr.position().top + tmpTr.height());

    regards, Robin
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 09 Mar 2012 Link to this post

    Robin:

    If you've not already done so, I'd suggest taking a look at the Menu/Popup Menu online demo. It offers you a way to attach to a client-side event and to position your context menu using JavasScript to modify the css for the popup. You can also set menu width using the css.

    See the attached image which uses FireBug in FireFox to display css class information.

    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robin
    Robin avatar
    4 posts
    Member since:
    Sep 2011

    Posted 09 Mar 2012 Link to this post

    Hi jumpstart,

    thank you very much, but this is not helpful for me :-(

    The width of the ContextMenu depends on the language of the user, so its not possible to set a fixed size.

    I solved the problem by showing and immediately hiding the context menu once after the site has been loaded to get the width.
    Then I can use the saved width to set the position of the context menu.

    But that's crap ;-)

  5. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 12 Mar 2012 Link to this post

    Hello Robin,

    You could try something this, where you can re-position it during the OnClientShown event. This assumes you store the row in a global variable called contextMenuTarget.

    var contextTimeout;
      
    function RadContextMenu1_OnClientShown(sender, args){
        contextTimeout = setTimeout(function() { sender.showAt(contextMenuTarget.position().left + contextMenuTarget.width() - $telerik.$(sender.get_contextMenuElement()).width(), contextMenuTarget.position().top + contextMenuTarget.height()); clearTimeout(contextTimeout); });
    }

    I use a timeout to re-position the context menu because in IE it was crashing the browser when I just called it as is.

    I hope that helps.
  6. scvn80
    scvn80 avatar
    8 posts
    Member since:
    Sep 2009

    Posted 21 Aug 2013 Link to this post

    Hello telerik team

    I need to open Radcontextmenu popup and set mouse at first item. I have some question :
    - Is there a built in solution ?
    - How can I get mouse position when right click ?

    Thank for your support.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Aug 2013 Link to this post

    Hi scvn80,

    Please have a look at the following code I tried to display a RadContextMenu on right clicking an img tag with the mouse pointer over the first context menu item. Also please note that there is no mechanism for moving the mouse via JavaScript. So I set the context menu position in such a manner that the first item appear below the mouse pointer.

    ASPX:
    <div onmousedown="show_coords(event)">
        <span class="legend">Hover this image to display the popup menu</span>
        <br />
        <img src="../Images/Img/Desert.jpg" width="100px" height="75px" oncontextmenu="showMenu(event)" />
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
            <Items>
                <telerik:RadMenuItem Text="Item 1" />
                <telerik:RadMenuItem IsSeparator="true" />
                <telerik:RadMenuItem Text="Item 2" />
                <telerik:RadMenuItem IsSeparator="true" />
                <telerik:RadMenuItem Text="Item 3" />
            </Items>
        </telerik:RadContextMenu>
    </div>

    JavaScript:
    <script type="text/javascript">
        var x;
        var y;
     
        function showMenu(e) {
            var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
            contextMenu.showAt(x - 50, y - 10);
            $telerik.cancelRawEvent(e);
        }
     
        function show_coords(event) {
            x = event.clientX;
            y = event.clientY;
        }
    </script>

    Hope this helps,
    Shinu.
  8. scvn80
    scvn80 avatar
    8 posts
    Member since:
    Sep 2009

    Posted 23 Aug 2013 Link to this post

    Hello telerik team.

       Your support service is the best I've ever know. Thanks for your script.
        Can you explain me what type of event and where can I view properties list of event like client.X,client.Y ?

    Thank you for your support.
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Aug 2013 Link to this post

    Hi scvn80,

    The showAt() client method of RadContextMenu is used to display the menu as a pop-up at the coordinates specified by the parameters. The show_coords() is a user defined method which retrieves the co-ordinates of the current mouse position during the onmousedown event.

    The onmousedown event occurs when a user presses a mouse button over an element.

    The order of events related to the onmousedown event (for the left/middle mouse button):

    1. onmousedown
    2. onmouseup
    3. onclick

    The order of events related to the onmousedown event (for the right mouse button):

    1. onmousedown
    2. onmouseup
    3. oncontextmenu

    This is a common JavaScript event and it is not specific to telerik RadControls. The event handler can have an argument which can be used to retrieve the corresponding X,Y co-ordinates positions as well as many other properties like fromElement, relatedTarget, bubbles etc.

    Thanks,
    Shinu.
  10. scvn80
    scvn80 avatar
    8 posts
    Member since:
    Sep 2009

    Posted 28 Aug 2013 Link to this post

    Hello Shinu

        I get it. I'm going to learn Javascript.

    Thank you very much.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017