This is a migrated thread and some comments may be shown as answers.

RadEditor HTML Mode within Tabs not working

1 Answer 197 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Christian Weber
Top achievements
Rank 1
Christian Weber asked on 23 Feb 2009, 02:37 PM
Hi

I've got trouble with the RadEditor within the RadTabStrip. It's working well if I do not set the EditModes. But as soon I set the EditModes to "html", which obviously only support HTML Input.

It seems that the Content Form (in this case the Iframe in the RadEditor) is disabled, because I can not insert Text and neither read the text which I've set in the Code behind...

I debugged it with the IE DEVBar and saw that there are two IFRAMES both with ID "RadEditor1_contentIframe". The first one is for the Design and Preview mode and the second for the HTML Mode. In this case the 1. Contentframe should not be displayed which is correct the style is set to DISPLAY: none;. So obviously the second Iframe should be visible, which is almost correctly it has no style attribut "Display:none" but it has a Style Attribut HEIGHT: 0px which makes the HTML Content IFRAME invisible. When I set this in the DevBar to 100% I see my Content which I set in the Code behind.

Initial position:
HTML View

 

<telerik:RadTabStrip runat="server" ID="ProcessViewTabs" Skin="Vista" SelectedIndex="0" MultiPageID="ProcessMultiView"> 

 

    <Tabs 

 

 

        <telerik:RadTab Text="Tab 1" runat="server" Enabled="true" PageViewID="Tab1View"></telerik:RadTab>

 

        <telerik:RadTab Text="Tab 2" runat="server" Enabled="true" PageViewID="Tab2View"></telerik:RadTab>

   </Tabs>

 

</telerik:RadTabStrip>

 

 

 

<telerik:RadMultiPage runat="server" ID="ProcessMultiView" SelectedIndex="0">

 

    <telerik:RadPageView ID="Tab1View" runat="server"> </telerik:RadPageView>

 

 

 

    <telerik:RadPageView ID="Tab2View" runat="server">
     <telerik:RadEditor  runat="server" id="RadEditor1" EditModes="Html"></telerik:RadEditor  

 

 

 

</telerik:RadPageView>

</

telerik:RadMultiPage>

 

 

 

 


Code behind:
RadEditor1.Content = "Test Content!";

 

 

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 25 Feb 2009, 03:18 PM
Hello Christian,

I think that this is a browser behavior because this problem does not appear in Firefox. Nevertheless, I will talk with our lead developers and if possible we will fix it in the controls' code.

For your convenience I wrote a code solution based on the your investigation which sets the height of the second IFRAME to 100% when the user clicks on the tab. Here it is:

        <telerik:RadTabStrip runat="server" OnClientTabSelecting="OnClientTabSelecting" ID="ProcessViewTabs" Skin="Vista" SelectedIndex="0"
            MultiPageID="ProcessMultiView">
            <Tabs>
                <telerik:RadTab Text="Tab 1" runat="server" Enabled="true" PageViewID="Tab1View">
                </telerik:RadTab>
                <telerik:RadTab Text="Tab 2" runat="server" Enabled="true" PageViewID="Tab2View">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage Height="800px" runat="server" ID="ProcessMultiView" SelectedIndex="0">
            <telerik:RadPageView ID="Tab1View" runat="server">
            </telerik:RadPageView>
            <telerik:RadPageView ID="Tab2View" runat="server">
                <telerik:RadEditor runat="server" ID="RadEditor1" EditModes="Html">
                </telerik:RadEditor>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        
        <script type="text/javascript" >
           function OnClientTabSelecting(sender, args)
           {
            
                if (args.get_tab().get_text() == "Tab 2")
                {
                       var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to the editor
                       //set height of 100% to the  <iframe>  element of the TextArea
                       editor.get_element().getElementsByTagName("IFRAME")[1].style.height = "100%";
                }
           }
        </script>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
Editor
Asked by
Christian Weber
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or