Positioning radcontext menu sub menu with offset y position

4 posts, 1 answers
  1. Saikrishna
    Saikrishna avatar
    6 posts
    Member since:
    May 2014

    Posted 12 May 2014 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 May 2014 in reply to Saikrishna Link to this post

    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.
  3. Saikrishna
    Saikrishna avatar
    6 posts
    Member since:
    May 2014

    Posted 29 May 2014 in reply to Shinu Link to this post

    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
  4. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 May 2014 in reply to Saikrishna Link to this post

    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.
Back to Top