RadEditor inside RadGrid editform

[Bader]

Hello,

I have a problem with the radeditor control when it is placed into the radgrid editform (Please view the attached image).
As you can see in the attached image, the radeditor sometimes (Allways on the first time I click on "Add new record" or "Edit") not displayed well.

Here is my code:
Default.aspx:

<%@ Page Title="Code Library Managenment" Language="C#" MasterPageFile="~/Common/MasterPages/DefaultMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="QtNS.Pages_QualitestSQLServer_CodeLibraryMng_Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
        .EditFormHeader td
        {
            background: white;
            padding: 5px 0px;
        }
</style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Panel ID="MainPanel" style="margin:10px;" runat="server">
<asp:Panel ID="HeaderLabelPanel" HorizontalAlign="Left" Width="100%" runat="server">
    <asp:Label ID="HeaderLabel" runat="server" SkinID="HeaderText" Text="Code Library Managenment" ></asp:Label>
</asp:Panel>
<br />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript">
        function RowDblClick(sender, eventArgs) {
            sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
        }
    </script>

</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="100" />


<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True" CssClass="RadGrid" Width="800px"
                AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true" OnPreRender="RadGrid1_PreRender"
                OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound"
                OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand">
            <MasterTableView Width="100%" CommandItemDisplay="Top" AllowFilteringByColumn="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" CommandItemSettings-RefreshText="<%$ Resources:GeneralTelerikResource, TelerikRadGridRefreshText %>" CommandItemSettings-AddNewRecordText="<%$ Resources:GeneralTelerikResource, TelerikRadGridAddNewRecordText %>" DataKeyNames="SerID">
            <Columns>
                <telerik:GridEditCommandColumn EditText="Edit" UniqueName="EditCommandColumn" >
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn UniqueName="SerID" FilterControlWidth="20px" HeaderText="" Visible="false" DataField="SerID">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="ViewCode" HeaderText="View" AllowFiltering="false" ItemStyle-Width="10%" DataField="Cntnt">
                  <ItemTemplate>
                      <asp:HyperLink ID="ViewCodeHyperLink" runat="server" Text="View" NavigateUrl='<%# "Code.aspx?sid=" + Eval("SerID").ToString() %>'></asp:HyperLink>
                  </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="HasCode" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" HeaderText="">
                  <ItemTemplate>
                     <b>Desc:</b> <asp:Label ID="DescLabelel1" runat="server" Text='<%# Bind("Title") %>'></asp:Label><br />
                     <b>Has Code:</b>  <asp:CheckBox ID="HasCodeCheckBox" runat="server" Enabled="false" Checked='<%# (Eval("Cntnt").ToString().Contains("</code>")) ? true : false %>' ></asp:CheckBox>
                  </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="UserID" HeaderText="User ID" DataField="UserID" ReadOnly="True" Display="False">
                   <ItemTemplate>
                      <asp:Label ID="UserIDLabel" runat="server" Text='<%# Eval("UserID") %>'></asp:Label>
                   </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn UniqueName="UserName" HeaderText="<%$ Resources:MngResource, PagesSecureSqlServerMngRadGridColumnsUserName %>" ItemStyle-Width="12%" DataField="UserName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="LastModifyDate" HeaderText="<%$ Resources:MngResource, PagesSecureSqlServerMngRadGridColumnsLastModifyDate %>" ItemStyle-Width="12%" DataField="LastModifyDate">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="Cntnt" HeaderText="Content" ItemStyle-Width="10%" DataField="Cntnt">
                  <ItemTemplate>
                     ...
                  </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn ConfirmText="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnConfirmText %>" ConfirmDialogType="RadWindow" ItemStyle-Width="8%"
                    ConfirmTitle="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnConfirmTitle %>" ButtonType="ImageButton" CommandName="Delete" Text="<%$ Resources:GeneralTelerikResource, TelerikRadGridDeleteColumnText %>"
                    UniqueName="DeleteColumn">
                    <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                </telerik:GridButtonColumn>
            </Columns>
            <EditFormSettings UserControlName="~/P/Developers/CodeLibrary/SubUserControl.ascx" EditFormType="WebUserControl">
                <EditColumn  UniqueName="EditCommandColumn1">
                </EditColumn>
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowDblClick="RowDblClick" />
        </ClientSettings>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>
</asp:Panel>
</asp:Content>

SubUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SubUserControl.ascx.cs" Inherits="QtNS.Pages_QualitestSQLServer_CodeLibrary_SubUserControl" %>

<link rel="stylesheet" type="text/css" href="../../../../Common/Controls/RadEditor/RTLRadEditorStyle/Editor_RTL.css" />
<link rel="stylesheet" type="text/css" href="../../../Common/Design/Style/Style.css" />

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"
    style="BORDER-COLLAPSE: collapse">
    <tr align="left">
        <td colspan="2">
            <asp:Panel ID="LastModifyPanel" runat="server" HorizontalAlign="<%$ Resources:MngResource, NoContentFloat %>" Visible='<%# ((bool)DataBinder.Eval(Container, "OwnerTableView.IsItemInserted")) ? false : true %>' Width="100%">
                <asp:Label ID="LastModifyByTextLabel" runat="server" Font-Bold="true" Text="<%$ Resources:MngResource, LastModifyBy %>" ></asp:Label>
                <asp:Label ID="LastModifyByIDLabel" runat="server" Text='<%#  DataBinder.Eval( Container, "DataItem.UserName" ) %>'></asp:Label>
                <asp:Label ID="LastModifyDateTextLabel" runat="server" Font-Bold="true" Text="<%$ Resources:MngResource, LastModifyDate %>" ></asp:Label>
                <asp:Label ID="LastModifyDateLabel" runat="server" Text='<%#  DataBinder.Eval( Container, "DataItem.LastModifyDate" ) %>'></asp:Label>
            </asp:Panel>
        </td>
    </tr>
    <tr align="left">
        <td>
            <table id="Table3" cellspacing="1" cellpadding="1" width="100%" border="0">
                <tr>
                    <td class="FirstColumn"></td>
                    <td class="SecondColumn"></td>
                </tr>
                <tr valign="top">
                    <td class="FirstColumn">
                        <asp:Label ID="TitleLabel" runat="server" Text="Title:"></asp:Label>
                    </td>
                    <td class="SecondColumn">
                        <telerik:RadTextBox ID="TitleRadTextBox" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.Title" ) %>' MaxLength="300" Width="600px" >
                        </telerik:RadTextBox>
                    </td>
                </tr>
                <tr>
                  <td  class="FirstColumn" valign="top">
                      <asp:Label ID="CntntLabel" runat="server" Text="<%$ Resources:Resource, SecureSqlServerCodeHelperRadGridUserControlCntntLabel %>"></asp:Label>
                  </td>
                  <td class="SecondColumn" valign="top">
                        <telerik:RadEditor runat="server" ID="CntntRadEditor" Height="500px" Width="100%" style="z-index:1000;" Content='<%# DataBinder.Eval( Container, "DataItem.Cntnt") %>' ToolsFile="~/Common/Controls/RadEditor/xml/CustomFullSetOfToolsForSecureTables.xml">
                            <Modules>
                                <telerik:EditorModule Visible="false" />
                            </Modules>
                        </telerik:RadEditor>
                  </td>
               </tr>
            </table>
        </td>
     </tr>
     <tr>
        <td align="left" colspan="2">
            <asp:button id="btnUpdate" text="<%$ Resources:GeneralTelerikResource, TelerikRadGridEditFormUpdateButtonText %>" runat="server" CommandName="Update" Visible='<%# !(DataBinder.Eval( Container, "DataItem") is Telerik.Web.UI.GridInsertionObject) %>'></asp:button>
                <asp:button id="btnInsert" text="<%$ Resources:GeneralTelerikResource, TelerikRadGridEditFormInsertButtonText %>" runat="server" CommandName="PerformInsert" Visible='<%# DataBinder.Eval( Container, "DataItem") is Telerik.Web.UI.GridInsertionObject %>'></asp:button>

                <asp:button id="btnCancel" text="<%$ Resources:GeneralTelerikResource, TelerikRadGridEditFormCancelButtonText %>" runat="server" causesvalidation="False" commandname="Cancel"></asp:button></td>
    </tr>
</table>

Style:

.FirstColumn
{
width:15%;
}

.SecondColumn
{
width:85%;
}

Note: As i sayed, the radeditor is displyed as it is shown in the screen shot just on the first time I click "Add new record" or "Edit". After that the radeditor will be displayed normally even if I click the "Add new record" or "Edit" linkbuttons.

Please, I need your help to solve this problem,
It is appreciatede to send me the modified code.

Regards,
Bader

[Dobromir]

Hi Bader,

This problem occurs due to the fact that RadEditor CSS files are not fully loaded when the editor calculates its’ toolbar size. Please review the following forum thread for solution and more detailed information:
Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent

Greetings,
Dobromir
the Telerik team

[Bader]

Hello,

Thank for your reply,I have a question:
What is the difference between:

<head id="Head1" runat="server">

    <title></title>

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

</head>

....................

    <telerik:RadEditor runat="server" ID="RadEditor1" Skin="Default" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

    </telerik:RadEditor>

And:

<Telerik:RadStyleSheetManager ID="SSH1" EnableStyleSheetCombine="true" runat="server">

    <StyleSheets>

        <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />

        <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Editor.Default.css" />

        <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />

        <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Window.Default.css" />

    </StyleSheets>

</Telerik:RadStyleSheetManager>

Plaese, give me a deep explaination about the above approches and which approch should I use?

Regards,
Bader

[Rumen]

Hi Bader,

The major difference is that the EnableStyleSheetCombine="true" property of RadStyleSheetManager will combine all CSS files inside the StyleSheets collection in a single CSS file and import it in the page. You can use this approach to avoid the Internet Explorer CSS limitations.

Kind regards,
Rumen
the Telerik team