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

RadEditor is not display properly in the ajax tab control it

10 Answers 220 Views

Editor

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

koteswararao asked on 17 Oct 2011, 07:18 AM

hi experts ,

i placed one telerik editor into the ajax tab container ,the design after page loaded (immediately) the design is not in properway it is ajax toolkit control only why the display is damaged can you help me please i posted code as well as screen shots

<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"
    Inherits="Telerik.Web.Examples.Editor.Default.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body class="BODY">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td style="vertical-align: top;">
                <cc1:TabContainer ID="tcProduct" runat="server" ActiveTabIndex="1">
                    <cc1:TabPanel ID="tpProduct" HeaderText="First Panel" runat="server" TabIndex="1">
                    <ContentTemplate>
                     This is first panel in this tab container which is upper to the telerik panel .
                    </ContentTemplate>
                    </cc1:TabPanel>
                    <cc1:TabPanel ID="tpProduct1" HeaderText="Product Information" runat="server" TabIndex="1">
                        <ContentTemplate>
                            <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="515"
                                ToolbarMode="RibbonBar">
                                <ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing" UploadPaths="~/Editor/Img/UserDir/Marketing"
                                    DeletePaths="~/Editor/Img/UserDir/Marketing"></ImageManager>
                            </telerik:RadEditor>
                        </ContentTemplate>
                    </cc1:TabPanel>
                </cc1:TabContainer>
            </td>
            <td style="padding: 0 0 0 8px; vertical-align: top;" id="decorationZoneElement">
            </td>
        </tr>
    </table>

    <hr />
    Telerik tabs

    </form>
</body>
</html>

10 Answers, 1 is accepted

answered on 18 Oct 2011, 06:59 AM

am already place this code inside the head tag but no change in that display

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'
            rel="stylesheet" type="text/css" />
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>'
            rel="stylesheet" type="text/css" />
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'
            rel="stylesheet" type="text/css" />
        <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Default.Window.Default.css") %>'
            rel="stylesheet" type="text/css" />
    </telerik:RadCodeBlock>

answered on 18 Oct 2011, 02:43 PM

TabContainerTest.zip

Hi Koteswararao,

I am still unable to reproduce the problem on my end. Could you please see the following video http://screencast.com/t/Z7dDohG4Q8h and test the attached project? Am I missing something and are you able to reproduce the problem with the provided project?

Regards,
Rumen
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

answered on 25 Oct 2011, 11:31 AM

TabContainerNet35.zip

Hi Koteswararao,

The attached project is inaccessible due to this error:
Sorry!! We are unable to serve your file at this moment Due to problem with one of the Volume of our stroage . Please try again after some time.

Nevertheless, I rewrote the project for VS2008 and .NET 3.5 and reattached it.

Another approach is to replace the TabContainer AjaxControlToolkit control with RadTabStrip.

Kind regards,
Rumen
the Telerik team

answered on 21 Nov 2011, 04:55 PM

Hello Koteswararao,

I was able to fix the problem firing the repaint() method of RadEditor when the onclick event of the tab is executed:

<cc1:TabPanel OnClientClick="OnClientClick" ID="tpProduct1" HeaderText="Product Information" runat="server" TabIndex="1">

<ContentTemplate>

<script>

function OnClientClick() {

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

setTimeout(function() {

editor.repaint();

}, 0);

}

</script>

<telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="515"

ToolbarMode="RibbonBar">

<ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing" UploadPaths="~/Editor/Img/UserDir/Marketing"

DeletePaths="~/Editor/Img/UserDir/Marketing"></ImageManager>

</telerik:RadEditor>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

Note that the time out is needed.

Best wishes,
Rumen
the Telerik team

answered on 22 Nov 2011, 07:23 AM

Hi Rumen,

i place your code in my project but it shows no change , what is the "time out" here please see the code as i placed
<cc1:TabContainer ID="tcProduct" runat="server" ActiveTabIndex="0">
                    <cc1:TabPanel ID="tpProduct" HeaderText="First Panel" runat="server" TabIndex="0">
                    <ContentTemplate>
                     This is first panel in this tab container which is upper to the telerik panel .
                    </ContentTemplate>
                    </cc1:TabPanel>
                    <cc1:TabPanel ID="tpProduct1" HeaderText="Product Information" runat="server" TabIndex="1" OnClientClick="OnClientClick">
                        <ContentTemplate>
                        <script type="text/javascript" language="javascript" >
                            function OnClientClick() {
                                var editor = $find('<%=RadEditor2.ClientID%>');
                                setTimeout(function() {
                                    editor.repaint();
                                }, 0);
                            }
        </script>
                            <telerik:RadEditor runat="server" ID="RadEditor2" SkinID="DefaultSetOfTools" Height="515"
                                ToolbarMode="RibbonBar">
                                <ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing" UploadPaths="~/Editor/Img/UserDir/Marketing"
                                    DeletePaths="~/Editor/Img/UserDir/Marketing"></ImageManager>
                            </telerik:RadEditor>
                </ContentTemplate>
                    </cc1:TabPanel>
                </cc1:TabContainer>

i will be feel very happy if you give sample application which you get success.

Thanks & Regards,
Sridhar,m.koteswarao

answered on 24 Nov 2011, 02:28 PM

TabContainerNet35.zip

Hi Koteswararao,

Please, find attached the requested project. You can see how the provided code works in the following video: http://screencast.com/t/X5a6bTLMVBoe.

Greetings,
Rumen
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadEditor is not display properly in the ajax tab control it

10 Answers, 1 is accepted