[Solved] Editor in tooltip => toobar disabled

[luc bonenfant]

Hello,

If I put a RadEditor into a Tooltip, the editor toolbar has no effect : Bold etc...

This is my code :

    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <div>
        <asp:Image ID="img_Intro" runat="server" ImageUrl="" style="vertical-align:middle;cursor:pointer;" />
       <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" TargetControlID="img_Intro"
         ManualClose="true" Skin="Telerik">
            <div style="padding:5px;">
                 <telerik:radeditor ID="RadEditor1" runat="server" Skin="Vista" ToolsFile="~/BasicTools.xml" Height="150px" EditModes="All" NewLineBr="false" />
            </div>
        </telerik:RadToolTip>
        </div>
    </form>

I'm using 2008 Q3.
Do you see the same problem ?

Thank you for help.
Luc.

[Tsvetie]

Hello luc bonenfant,
We are aware of this problem. For the time being, you can use the following workaround:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Image ID="img_Intro" runat="server" ImageUrl="" Style="vertical-align: middle;
        cursor: pointer;" />
    <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" TargetControlID="img_Intro"
        ManualClose="true" Skin="Telerik" OnClientShow="OnClientShow" OnClientBeforeShow="OnClientBeforeShow">
        <div style="padding: 5px;">
            <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Vista" Height="150px" EditModes="All"
                NewLineBr="false" />
        </div>
    </telerik:RadToolTip>

    <script type="text/javascript">
    function OnClientBeforeShow(sender, args)
    {
        // Fixes the problem with the toolbar
        var serverElement = sender.get_element();
        serverElement.style.display = '';

        window.setTimeout(function(){
           serverElement.style.display = 'none';
        }, 0);
    }

    function OnClientShow(sender, args)
    {
        // Fixes the problem with the content area in FF and Safari
        var editor = $find("<%= RadEditor1.ClientID %>");
        editor.onParentNodeChanged();
    }
    </script>

</form>

The problem is caused by the fact that the RadEditor is rendered in an invisible element and then is moved from that parent to another, that is visible. As the editor cannot initialize correctly when it is a child of an element with "display:none", we have code that executes to initialize it correctly as soon as its parent becomes visible. In this particular case however, the editor is not notified of the fact that it is moved to a visible parent. We will do our best to improve the behavior of the RadEditor in such cases for one of the following updates of the suite.

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[luc bonenfant]

It's working great. Thank you.

[arnaud]

Hi,

This part of your fix :

// Fixes the problem with the content area in FF and Safari

var editor = $find("<%= RadEditor1.ClientID %>");

editor.onParentNodeChanged();

is ok for Firefox, but do you have an equivalent for IE ?

Thank you.

[Rumen]

Hi Arnaud,

The onParentNodeChanged method works in IE too. If you experience this problem in IE, please, open a support ticket and send a sampel working project that demonstrates the problem. Once we reproduce it on our side, we will provide a solution.

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.