RadEditor not in AJAX request being updated

[Andy Green]

Hi

I have a RadEditor, a few buttons, and a checkboxlist on a page.

When the buttons are clicked the checkboxlists are being updated with AJAX, this works fine.

But... the RadEditor content is being cleared. It looks like its being reloaded. There is a textbox on the page and the content of this control is retained. The RadEditor is not in the AJAX settings.

This is my page code:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/Display2.master" AutoEventWireup="false" CodeFile="Mailshot.aspx.vb" Inherits="Admin_Mailshot" MaintainScrollPositionOnPostback="false"%>
<%@ Register src="../Controls/AdminMenu.ascx" tagname="AdminMenu" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphLeft" Runat="Server">

    <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="Server" BackgroundPosition="Center" BackgroundTransparency="50"><img alt="Loading..." src="../App_Themes/Images/ajax-loader.gif"/></telerik:RadAjaxLoadingPanel>

    <asp:HiddenField ID="hdnCommitte" runat="server" />

         <telerik:RadAjaxManager ID="AjaxManager" runat="server" UpdatePanelsRenderMode="Inline">
             <AjaxSettings>
                 <telerik:AjaxSetting AjaxControlID="btnSend">
                     <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="lblHeading"  LoadingPanelID="LoadingPanel"/>
                         <telerik:AjaxUpdatedControl ControlID="pnlMailShot"  LoadingPanelID="LoadingPanel" />
                         <telerik:AjaxUpdatedControl ControlID="pnlReceipt" LoadingPanelID="LoadingPanel" />
                     </UpdatedControls>
                 </telerik:AjaxSetting>
                 <telerik:AjaxSetting AjaxControlID="btnSelectAll">
                     <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="clbMembers" UpdatePanelCssClass="" />
                     </UpdatedControls>
                 </telerik:AjaxSetting>
                 <telerik:AjaxSetting AjaxControlID="btnSelectCommittee">
                     <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="clbMembers" UpdatePanelCssClass="" />
                     </UpdatedControls>
                 </telerik:AjaxSetting>
                 <telerik:AjaxSetting AjaxControlID="btnSelectClear">
                     <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="clbMembers" />
                     </UpdatedControls>
                 </telerik:AjaxSetting>
             </AjaxSettings>

        </telerik:RadAjaxManager>

    <div class="left">
        <div class="content">

            <h1><asp:Label id="lblHeading" runat="server" Text="Mailshot"></asp:Label></h1>
            <asp:Panel  id="pnlMailShot" runat="server">
                <table width="100%" cellpadding="2" cellspacing="0">
                    <tr>
                        <td>
                            <table  width="100%"  cellpadding="4" cellspacing="0">
                                <tr>
                                    <td>Subject:</td>
                                    <td>
                                        <asp:TextBox ID="txtSubject" runat="server" CssClass="TextBoxDecorator" Width="280px"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvSubject" runat="server" ControlToValidate="txtSubject" ><img src="../App_Themes/Images/Missing_10.gif" alt="Missing Field"/></asp:RequiredFieldValidator>
                                    </td>
                                    <td rowspan="2">
                                        <telerik:RadButton ID="btnSend"  Text="Send" runat="server" EnableEmbeddedSkins="true" Skin="Sunset">
                                            <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
                                        </telerik:RadButton>
                                        <telerik:RadButton ID="btnClear"  Text="Clear" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
                                            <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
                                        </telerik:RadButton>
                                    </td>
                                </tr>
                                <tr>
                                    <td>From:</td>
                                    <td><asp:Label id="lblFrom" runat="server"></asp:Label></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadEditor ID="rteMailshot" runat="server" EditModes="All"  Height="250px"  ToolsFile="~/ToolsFile.xml" Skin="Office2010Blue" Width="99.7%" CssClass="editor" ToolTip="" AutoResizeHeight="true">
                                <Content></Content>
                                <CssFiles>
                                   <telerik:EditorCssFile Value="~/App_Themes/Default/Editor.css" />
                                </CssFiles>
                                <Languages>
                                    <telerik:SpellCheckerLanguage Code="en-GB"/>
                                </Languages>
                                <SpellCheckSettings DictionaryLanguage="en-GB" />
                            </telerik:RadEditor>
                        </td>
                    </tr>
                </table>

                 <br />

                <div style="padding-left:5px;">
                    <telerik:RadButton ID="btnSelectAll"  Text="Select All" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
                        <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
                    </telerik:RadButton>

                    <telerik:RadButton ID="btnSelectCommittee"  Text="Select Committee" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
                        <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
                    </telerik:RadButton>

                    <telerik:RadButton ID="btnSelectClear"  Text="Clear" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
                        <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
                    </telerik:RadButton>
                </div>

                <asp:CheckBoxList id="clbMembers"  runat="server" RepeatColumns="5" RepeatDirection="Vertical" CellPadding="6" ClientIDMode="Static"></asp:CheckBoxList>
            </asp:Panel>

            <asp:Panel  id="pnlReceipt" runat="server" Visible="false">

                <p>The following mailshot was sent to <asp:Label ID="lblSentCount" runat="server" ></asp:Label></p>

                <p><asp:Label ID="lblMailshot" runat="server" ></asp:Label></p>

                <asp:Panel ID ="pnlNoEmail" runat="server" >
                    <h2>Members with no email:</h2>
                    <asp:CheckBoxList id="clbNoEmail"  runat="server" RepeatColumns="5" RepeatDirection="Vertical" CellPadding="6" ClientIDMode="Static" enabled="false"></asp:CheckBoxList>
                </asp:Panel>

            </asp:Panel>


        </div>
    </div>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cphRight" Runat="Server">
    <div class="right">
        <div class="content">
            <uc1:AdminMenu ID="AdminMenu1" runat="server" selectedItem="Mailshot.aspx" />
        </div>
    </div>
</asp:Content>

Andy

[Andy Green]

Hi

Just an update. This looks like its IE only. FF works OK

Andy

[Konstantin Dikov]

Hello Andy,

I have tried to replicate the issue with the disappearing text on my end, but to no avail.

Could you please elaborate about the current RadControls version you are using and on which IE version the issue occurs. 

As a side note, please note that in order for the RadAjaxLoadingPanel to work correctly, you need to set its Skin property. 

Additionally, please note that since you have wrapping panels as updated controls in your RadAjaxManager and since having nested AJAX setting is not supported scenario which could cause unwanted behavior, please try changing your current RadAjaxManager setting with the following and see if it solves the issue on your end:

<telerik:RadAjaxManager ID="AjaxManager" runat="server" UpdatePanelsRenderMode="Inline" DefaultLoadingPanelID="LoadingPanel">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pnlMailShot">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lblHeading" LoadingPanelID="LoadingPanel" />
                <telerik:AjaxUpdatedControl ControlID="pnlMailShot" LoadingPanelID="LoadingPanel" />
                <telerik:AjaxUpdatedControl ControlID="pnlReceipt" LoadingPanelID="LoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="pnlReceipt">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lblHeading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="Server" BackgroundPosition="Center"
    BackgroundTransparency="50" Skin="Default" MinDisplayTime="300">
</telerik:RadAjaxLoadingPanel>

If the issue persists, please get back to us with the additional information mentioned above.

 

Regards,
Konstantin Dikov
Telerik

[Andy Green]

Hi Konstantin 

I have tried your approach and its still the same - in fact its not what I need as the Loading panel image is displayed in each panel section not just over the entire page,

I'm using IE 10 (10.0.920.16736 & Tekerik  Version=2013.3.1114.40

I have a small video of what is happening, but its not a valid file type. I could email it.

Andy

PS - UPDATE

I have put the code back to my original, and removed the first AJAX section and it works. Or rather the contents dont clear, but the Send button isn't AJAX'd.

                 <telerik:AjaxSetting AjaxControlID="btnSend">
                     <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="lblHeading"  LoadingPanelID="LoadingPanel"/>
                         <telerik:AjaxUpdatedControl ControlID="pnlMailShot"  LoadingPanelID="LoadingPanel" />
                         <telerik:AjaxUpdatedControl ControlID="pnlReceipt" LoadingPanelID="LoadingPanel" />
                     </UpdatedControls>
                 </telerik:AjaxSetting>

[Andy Green]

I have this fixed now.

I moved the buttons into a separate panel, to take then out of the read editor panel, and added it to the AJAX control.

Andy

[Mads]

I'm facing a similar problem Andy, could to provide some sample code of how you fixed it, so it's more clear?

:)

[Andy Green]

Hi

If you look at my original post I have  a dic containing buttons and a checkboxlist in the same panel as the Rad editor. (pnlMailshot).

I took both of these out of the panel and created a new panel as:

<asp:Panel  id="pnlMembers" runat="server">
    <div style="padding-left:5px;">
        <telerik:RadButton ID="btnSelectAll"  Text="Select All" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
            <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
        </telerik:RadButton>

        <telerik:RadButton ID="btnSelectCommittee"  Text="Select Committee" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
            <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
        </telerik:RadButton>

        <telerik:RadButton ID="btnSelectClear"  Text="Clear" runat="server" EnableEmbeddedSkins="true" Skin="Sunset" CausesValidation="false">
            <Icon PrimaryIconUrl="../App_Themes/Images/Refresh_16.png"/>
        </telerik:RadButton>
    </div>

    <asp:CheckBoxList id="clbMembers"  runat="server" RepeatColumns="5" RepeatDirection="Vertical" CellPadding="6" ClientIDMode="Static"></asp:CheckBoxList>
</asp:Panel>

I then had to add the new panel to the update section:

<telerik:AjaxSetting AjaxControlID="btnSend">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="lblHeading" />
        <telerik:AjaxUpdatedControl ControlID="pnlMailShot"  LoadingPanelID="LoadingPanel" />
        <telerik:AjaxUpdatedControl ControlID="pnlMembers" LoadingPanelID="LoadingPanel2"/>
        <telerik:AjaxUpdatedControl ControlID="pnlReceipt" LoadingPanelID="LoadingPanel" UpdatePanelCssClass="" />
    </UpdatedControls>
</telerik:AjaxSetting>

Because this new panel is now updated separately I had to add a new loading panel one with no uploading image this way I don't get 2 images in different places on the page.

Hope this helps

Andy

[Mads]

Thanks Andy.

I found the solution to my problem somewhere else however, and here it comes for people in the future hitting this post from Google with similar problem :)

I used one of the solutions from here: 
http://www.telerik.com/support/kb/aspnet-ajax/editor/radeditor-content-not-saved-after-ajax-update-in-ie9-firefox-google-chrome-and-safari.aspx

In my case, I had some nested panels, so my solution were to set the UseSubmitBehavior="false" on the button which saved the content of the RadEditor.

Hope this helps someone :)