Set position of RadContextMenu

[Robin]

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

[Richard]

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!

[Robin]

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 ;-)

[Kevin]

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.

[scvn80]

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.

[Shinu]

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.

[scvn80]

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.

[Shinu]

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.

[scvn80]

Hello Shinu

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

Thank you very much.

[JeffSM]

This works for my purpose:

 

function showTopMenu(e) {
    var contextMenu = window.$find("meuMenu");
    if (contextMenu === null) return;

    if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
        contextMenu.showAt(window.innerWidth - 245, 35);
    }
}

 

#jefferson2020