Positioning radcontext menu sub menu with offset y position

[Saikrishna]

Hi,

I have a rad context menu on HTML table cell, and I want to position the sub menu relative to the page rather than parent element. Because, if the user scrolls down to last row and right click for context menu, the sub menu is not showing full list, instead its height is set as very small (due to table cell position - browser bottom) with Up and Down arrows (image2 attached).

This is working fine, if the user clicks top cell of table (Image1)

Is it possible to alter the sub menu position, such that, it will be set with an offset to y position (something like in image3 attached)?

Many Thanks,
Saikrishna

[Shinu]

Hi Saikrishna,

Please try the following CSS to change the position of the RadContextMenu level 3. Yo can change the top value based on your requirement.

CSS:

<style type="text/css">
    .rmVertical .rmGroup .rmLevel3
    {
        top: -50% !important;
    }
    .rmSlide
    {
        top: 0 !important;
    }
</style>

Another suggestion is that you can use the showAt method of the context menu client-side object to show the menu at a per-defined position, as shown in the online demo.

Thanks,
Shinu.

[Saikrishna]

Hi Shinu,

Sorry for not replying at the earliest.

Changing css is doing the trick. However, we have two rad context menus on the page. This change is impacting both the contextmenus.

Is there anything I can do to change only the required contextmenu (something in jQuery ??)

Regards,
Saikrishna

[Shinu]

Hi Saikrishna,

Please try to add a CssClass for the RadContextMenu  and change the style as follows.

ASPX:

<telerik:RadContextMenu ID="RadContextMenu" runat="server" CssClass="RadContextMenu1">
...
</telerik:RadContextMenu>

CSS:

.RadContextMenu1 .rmVertical .rmGroup .rmLevel3
{
    top: -50% !important;
}
.RadContextMenu1 .rmSlide
{
    top: 0 !important;
}

Thanks,
Shinu.