RadEditor is not display properly in the ajax tab control it

11 posts, 0 answers
  1. koteswararao
    koteswararao avatar
    39 posts
    Member since:
    Aug 2010

    Posted 17 Oct 2011 Link to this post

    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>
  2. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 17 Oct 2011 Link to this post

    Hello Koteswararao,

    Could you please try the solution provided in the following sticky note: Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent? You can also try to solve the problem by registering the external skins of RadEditor or the CDN Skins.

    Greetings,
    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
  3. koteswararao
    koteswararao avatar
    39 posts
    Member since:
    Aug 2010

    Posted 18 Oct 2011 Link to this post

    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>
  4. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 18 Oct 2011 Link to this post

    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
  5. koteswararao
    koteswararao avatar
    39 posts
    Member since:
    Aug 2010

    Posted 21 Oct 2011 Link to this post

    i am ubable to run this project lot of errors it showing in web.config i think this is versioning problem

    i am using the 3.5 frame work 2008 can you send me the solution for 2008 please
  6. koteswararao
    koteswararao avatar
    39 posts
    Member since:
    Aug 2010

    Posted 21 Oct 2011 Link to this post

    i prepared one solution for  you can download it and make it work please ,

    please change any code in this posted files only and send me back
    plese my vs-2008 framework :3.5

    you can download my project from :
  7. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 25 Oct 2011 Link to this post

    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
    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
  8. koteswararao
    koteswararao avatar
    39 posts
    Member since:
    Aug 2010

    Posted 17 Nov 2011 Link to this post

    thank you for your support in the present project when the page is load 2ed tab is opened it is working fine but when the page is loading first tab is opened the editor is not working fine that is the problem

    Steps to reproduce:
    1. TabContainerNet35.zip
    2. open the project
    3. replace the  ActiveTabIndex="1" with  ActiveTabIndex="0" in the  Default3.aspx file
    4. run the project
    5. when page load first panel tab is opened now
    6. then click on the productInformation tab
    7. see the radeditor design
    8. then you able to see the problem
  9. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 21 Nov 2011 Link to this post

    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
    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
  10. koteswararao
    koteswararao avatar
    39 posts
    Member since:
    Aug 2010

    Posted 22 Nov 2011 Link to this post

    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


  11. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 24 Nov 2011 Link to this post

    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
    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