Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Fullscreen view behind modal

4 Answers 270 Views
Editor
This is a migrated thread and some comments may be shown as answers.
sircutbreaker
Top achievements
Rank 1
sircutbreaker asked on 27 Oct 2009, 02:18 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 29 Oct 2009, 01:10 PM
popupeditform.zip
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.
0
sircutbreaker
Top achievements
Rank 1
answered on 29 Oct 2009, 03:41 PM
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
0
FaSSt2001
Top achievements
Rank 1
answered on 04 Jan 2010, 11:12 PM
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
0
Rumen
Telerik team
answered on 05 Jan 2010, 12:45 PM
fullscreenmodefixinmodalpopupextender.zip
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.
Tags
Editor
Asked by
sircutbreaker
Top achievements
Rank 1
Answers by
Rumen
Telerik team
sircutbreaker
Top achievements
Rank 1
FaSSt2001
Top achievements
Rank 1
Share this question
or