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

[Francis]

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.

[Marin Bratanov]

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