RadEditor inside RadGrid editform

4 posts, 1 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 17 Jul 2011 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 19 Jul 2011 Link to this post

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

    Posted 19 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top