IE9 issues: RadEditor's content invisible while ContextMenu is displayed

2 posts, 0 answers
  1. Francis
    Francis avatar
    12 posts
    Member since:
    Jul 2012

    Posted 26 Oct 2012 Link to this post

    I'm using a RadEditor using "Div" ContentAreaMode, with a simple ContextMenu calling the "BackColor" command to enable word selection. 

    Used to work perfectly but then I rendered my aspx Page inside a RadWindow and all of a sudden, the RadEditor's Content disappears when the ContextMenu is disaplayed.
    I suspect some z-index problem (maybe content going back-ward , so behind RadWindow).

    Here is the code:
    <telerik:RadEditor ID="EnonceContainer" Runat="server"
                               OnClientLoad="OnRadEditorClientLoad"
                               OnClientCommandExecuting="OnClientCommandExecuting"
                               EnableResize="true" ContentAreaMode="Div"
                               AutoResizeHeight="true"
                               Height="20px"
                               EditModes="Design"
                               Skin="Web20">
                   <CssFiles>
                       <telerik:EditorCssFile Value="../Styles/EditorContentArea.css" />
                   </CssFiles>
                   <ContextMenus>
                       <telerik:EditorContextMenu TagName="TABLE">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="TR">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="TD">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="SPAN">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="DIV">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="P">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="BODY">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="FONT">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="HTML">
                           <telerik:EditorTool ShowIcon="true" ImageUrl="../Images/paint.png" Text="Ajouter surbrillace" Name="Selectionner"/>
                       </telerik:EditorContextMenu>
                       <telerik:EditorContextMenu TagName="IMG">
                           <telerik:EditorTool ShowIcon="false" Text="Aucune surbrillance pour les images" Enabled="false" />
                       </telerik:EditorContextMenu>
                   </ContextMenus>
                   <Tools>
                       <telerik:EditorToolGroup>
                           <telerik:EditorTool Name="BackColor" />
                       </telerik:EditorToolGroup>
                   </Tools>
           </telerik:RadEditor>
           <script type="text/javascript">
               Telerik.Web.UI.Editor.CommandList["Selectionner"] = function (commandName, editor, args) {
                   editor.fire("BackColor", { value: "Yellow", commandName: "BackColor" });
               };
           </script>

    Here's the javascript code:
            function OnClientCommandExecuting(editor, args) {
                // Bloquer la toucher ENTER (Annuler l'évenement du RadEditor
                // !args.value --> On ne veut pas annuler l'évenement "BackColor:Yellow" (son argument ne dispose pas de la méthode get_commandName())
                if (!args.value && ("EnterNewLine" == args.get_commandName() || "ShiftEnterSafari" == args.get_commandName()))
                    args.set_cancel(true);
            }
               function OnRadEditorClientLoad(editor, args) {
                //Disable Drag'n'Drop à l'interieur du RadEditor(Éviter de déplacer les images)
                var element = document.all ? editor.get_document().body : editor.get_document();
                var eventHandler = document.all ? "drop" : "dragstart";
                $telerik.addExternalHandler(element, "drop", function (e) {
                    $telerik.cancelRawEvent(e);
                    return false;
                });
                $telerik.addExternalHandler(element, "dragstart", function (e) {
                    $telerik.cancelRawEvent(e);
                    return false;
                });
                $telerik.addExternalHandler(element, "dragend", function (e) {
                    $telerik.cancelRawEvent(e);
                    return false;
                });
     
                //Disable la saisie de texte dans le RadEditor
                editor.attachEventHandler("onkeydown", function (e) {
                    $telerik.cancelRawEvent(e);
                    return false;
                });
     
                RefreshCalculatriceContent();
     
                editor.get_element().style.width = (getDocWidth() - 40) + "px";
     
            }

    It might be since I added the RadWindow or it might also be since I dynamically set the RadEditor's width using this line:
        editor.get_element().style.width = (getDocWidth() - 40) + "px";
    The line simply set's the RadEditor's width OnClientLoad the same way it it resized when the "window.resize" event is called.

    The code works perfectly in Chrome and Firefox. Haven't tested with older IE versions. So only observed in IE9.

    Thanks for the help.
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5359 posts

    Posted 31 Oct 2012 Link to this post

    Hello Francis,

    I have just tested your snippets and they seem to be working fine with me. I am attaching here my test page and a video from my experiment. Am I missing something? What I'd also like to confirm is whether you are using the latest version of the controls and whether some JavaScript error is present on your actual page - if so, does resolving it help?


    Regards,
    Marin Bratanov
    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