RadEditor not in AJAX request being updated

8 posts, 0 answers
  1. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 14 Nov 2013 Link to this post

    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

  2. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 18 Nov 2013 Link to this post

    Hi

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

    Andy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1801 posts

    Posted 18 Nov 2013 Link to this post

    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
    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 the blog feed now.
  5. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 25 Nov 2013 Link to this post

    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>










  6. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 25 Nov 2013 Link to this post

    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
  7. Mads
    Mads avatar
    4 posts
    Member since:
    Nov 2012

    Posted 25 Nov 2013 Link to this post

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

    :)
  8. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 25 Nov 2013 Link to this post

    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
  9. Mads
    Mads avatar
    4 posts
    Member since:
    Nov 2012

    Posted 25 Nov 2013 Link to this post

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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017