Context Menu Position with Frame

11 posts, 0 answers
  1. Praveen
    Praveen avatar
    34 posts
    Member since:
    Apr 2009

    Posted 26 Apr 2012 Link to this post

      Context menu getting cropped with Iframe. Is there any way to set the context menu position with iframe?

    Please see the attached file for more info
  2. Praveen
    Praveen avatar
    34 posts
    Member since:
    Apr 2009

    Posted 30 Apr 2012 Link to this post

    Any Update??
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Apr 2012 Link to this post

    Hello Praveen,

    Did you try using the EnableScreenBoundaryDetection="true" property of the RadContextMenu control? If this does not help can you provide more details on the behavior that you are trying to achieve?

    All the best,
    Kate
    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. Praveen
    Praveen avatar
    34 posts
    Member since:
    Apr 2009

    Posted 09 May 2012 Link to this post

    doesn't work. Is there any way to show context menu on top just like attached file??
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 09 May 2012 Link to this post

    Hi Praveen,

    One way of how to implement this is by using custom css classes. However, this approach requires that  you have a fixed amount on RadMenuItems. If you have two menu items for instance you can use the selector below (in any other case you will need to either increase or decrease the margin):
    <style type="text/css">
       div.RadMenu ul.rmVertical,
       div.RadMenu ul.rmHorizontal,
        div.RadMenu ul.rmRootScrollGroup,
         div.RadMenu_Context ul.rmHorizontal {
          margin: -65px 0 0;
    }
        </style>

    Kind regards,
    Kate
    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. Eugen
    Eugen avatar
    5 posts
    Member since:
    Sep 2011

    Posted 14 Oct 2012 Link to this post

    I have contextMenu of RadFilter inside iframe. The ContextMenu getting cropped on ScreenBoundaryDetection=true. Please take a look on screen short. The AutoScroll doesn't work inside iframe too.
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Oct 2012 Link to this post

    Hi Eugen,

    I am not quite sure that I completely understand the issue that you get. Can you please provide some code that we can test locally as well as elaborate a bit more on how you would expect the RadContextMenu to behave?

    Greetings,
    Kate
    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.
  9. Eugen
    Eugen avatar
    5 posts
    Member since:
    Sep 2011

    Posted 08 Nov 2012 Link to this post

    Here is the code that I mean.

    Default.aspx:
    <%@ Page Title="Startseite" Language="C#" MasterPageFile="~/Site.master" CodeBehind="Default.aspx.cs" Inherits="ContextMenuInIframe._Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <iframe src="IframeContent.aspx">
    </iframe>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadContextMenu ID="RadContextMenu1" EnableRootItemScroll="true" EnableScreenBoundaryDetection="true" EnableAutoScroll="true" runat="server">
    <Targets>
    <telerik:ContextMenuDocumentTarget />
    </Targets>
    </telerik:RadContextMenu>
    </asp:Content>

    Default.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace ContextMenuInIframe
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected override void OnLoad(EventArgs e)
            {
                for (int i = 1; i < 100; i++)
                {
                    this.RadContextMenu1.Items.Add(new Telerik.Web.UI.RadMenuItem("Item" + i));
                }
     
                base.OnLoad(e);
            }
        }
    }


    IframeContent.aspx:

    <%@ Page Language="C#" CodeBehind="IframeContent.aspx.cs" Inherits="ContextMenuInIframe.IframeContent" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadContextMenu ID="RadContextMenu1" EnableRootItemScroll="true" EnableScreenBoundaryDetection="true" EnableAutoScroll="true" runat="server">
                <Targets>
                    <telerik:ContextMenuDocumentTarget />
                </Targets>
            </telerik:RadContextMenu>
        </form>
    </body>
    </html>

    IframeContent.aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace ContextMenuInIframe
    {
        public partial class IframeContent : System.Web.UI.Page
        {
            protected override void OnLoad(EventArgs e)
            {
                for (int i = 1; i < 100; i++)
                {
                    this.RadContextMenu1.Items.Add(new Telerik.Web.UI.RadMenuItem("Item" + i));
                }
     
                base.OnLoad(e);
            }
        }
    }
  10. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Nov 2012 Link to this post

    Hello Eugen,

    I was able to replicate the issue that you described with the code provided. One possible solution that I can think of is to use the DefaultGroupSettings of the menu control. It will render scroll bars to the RadContextMenu that will allow you to view all of the items:
    <telerik:RadContextMenu ID="RadContextMenu1" EnableRootItemScroll="true" EnableScreenBoundaryDetection="true" EnableAutoScroll="true" runat="server">
                 <DefaultGroupSettings Height="200px" />
                     <Targets>
                      <telerik:ContextMenuDocumentTarget />
                  </Targets>
              </telerik:RadContextMenu>

    Regards,
    Kate
    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.
  11. Eugen
    Eugen avatar
    5 posts
    Member since:
    Sep 2011

    Posted 14 Nov 2012 Link to this post

    Thank You!

    DefaultGroupSettings works for me. Is it possible to make the height automatically adjust to viewport size?
  12. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Nov 2012 Link to this post

    Hi Eugen,

    You can set the desired height to the scrollWrapElement using the following code:
    function OnClientShown(sender, args) {
    var scrollWrapElement = sender._getScrollWrapElement();
    scrollWrapElement.style.height = "100px";
    }

    Regards,
    Kate
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017