Fullscreen view behind modal

5 posts, 1 answers
  1. sircutbreaker
    sircutbreaker avatar
    111 posts
    Member since:
    Oct 2007

    Posted 26 Oct 2009 Link to this post

    I have a radeditor that is in a user control that is used as the form for a radgrid....

    so, when i am in edit mode (popup and modal) the form and the editor appear correctly.. however, when i press the fullscreen icon in the editor, it goes fullscreen behind the modal screen...

    how can I remedy this?

    thanks!

    pic 1

    pic 2
  2. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 29 Oct 2009 Link to this post

    Hi,

    I was able to reproduce the problem by attaching to the ToggleScreenMode command of RadEditor and hiding the overlaying DIV element when the editor is placed in FullScreen mode and displaying the DIV when toggling back to normal mode.

    You can do that with the following javascript code where modalDivId_RadGrid2 is the ID of the wrapping div element:

    <script type="text/javascript" language="javascript">
        function OnClientCommandExecuting(editor, args) {
            var commandName = args.get_commandName();
            if (commandName == "ToggleScreenMode") {
                if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode
                {
                    $get("modalDivId_RadGrid2").style.display = "none";
                    fullscreen = true;
                }
                else {
                    $get("modalDivId_RadGrid2").style.display = "";
                }
            }
        }
    </script>
    <telerik:RadEditor Skin="Default" OnClientCommandExecuting="OnClientCommandExecuting"
     ID="TextBox10" Content='<%# Bind( "FirstName") %>' runat="server">
    </telerik:RadEditor>

    For your convenience I have attached my test page taken from this demo example: PopUp Edit Form.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sircutbreaker
    sircutbreaker avatar
    111 posts
    Member since:
    Oct 2007

    Posted 29 Oct 2009 Link to this post

    I had to add a 'ctl00_ContentPlaceHolder1'  in the text for the javascript routine.. but that was right on point.

    I am going to assume this will be incorporated into future builds?

    Thanks again!

    Jeff
  5. FaSSt2001
    FaSSt2001 avatar
    11 posts
    Member since:
    Sep 2009

    Posted 04 Jan 2010 Link to this post

    Hi. I am having this same problem, but the attached sample project doesn't show a div with the id "modalDivId_RadGrid2" anywhere. I am using the RadEditor in a ModalPopupExtender. I am not sure which div I should be hiding for it to not appear behind the overlay. Can you let me know which div should be hidden. Here is a layout of what I have:

    ModalPopupExtender using a Panel containing:
        -UpdatePanel
            -Panel
                -RadEditor

    Thanks,
    Ed
  6. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 05 Jan 2010 Link to this post

    Hi Ed,

    Here is the requested solution for your scenario:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register
        Assembly="AjaxControlToolkit"
        Namespace="AjaxControlToolkit"
        TagPrefix="ajaxToolkit" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
        .modalBackground
        {
                  background-color:Olive;
                  filter:alpha(opacity=70);
                  opacity:0.7;
        }
     
        .modalPopup
        {
                  background-color:#ffffdd;
                  border-width:3px;
                  border-style:solid;
                  border-color:Gray;
                  padding:3px;
                  width:250px;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" ID="ScriptManager">
            </asp:ScriptManager>
                <asp:Button ID="btn_test" Text="Test" runat="server" />
                  
                <ajaxToolkit:ModalPopupExtender ID="btn_test_ModalPopupExtender" runat="server" 
                    PopupControlID="panelPopup"  BackgroundCssClass="modalPopup"
                    TargetControlID="btn_test">
                </ajaxToolkit:ModalPopupExtender>
                  
                <asp:Panel runat="server" ID="panelPopup">
                <script type="text/javascript" language="javascript">
                function OnClientCommandExecuting(editor, args) {
                    var commandName = args.get_commandName();
                    if (commandName == "ToggleScreenMode") {
                        if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode
                        {
                            getElementsByClassName("modalPopup")[0].style.display = "none";
                             
                            fullscreen = true;
                        }
                        else {
                            getElementsByClassName("modalPopup")[0].style.display = "";
                        }
                    }
                }
                 
                function getElementsByClassName(classname, node) {
                    if (!node) node = document.getElementsByTagName("body")[0];
                    var a = [];
                    var re = new RegExp('\\b' + classname + '\\b');
                    var els = node.getElementsByTagName("*");
                    for (var i = 0, j = els.length; i < j; i++)
                        if (re.test(els[i].className)) a.push(els[i]);
                    return a;
                }
                </script>
                    <telerik:RadEditor OnClientCommandExecuting="OnClientCommandExecuting" runat="server" ID="RadEditor1">
                    </telerik:RadEditor>
                </asp:Panel>
        </form>
    </body>
    </html>

    When toggling to full screen mode you should hide a DIV element which has a class named modalPopup. For your convenience I have attached my test project.

    Best wishes,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017