Clear Radeditor Content after button submit

4 posts, 0 answers
  1. Richard P
    Richard P avatar
    3 posts
    Member since:
    Jun 2017

    Posted 25 Sep 2017 Link to this post

    Dear Telerik team,

     

    I have problem clear content of radeditor after button submit. My radeditor not inside updatepanel, but my button inside updatepanel.

    When submit button i cannot clear content of radeditor.

    Please inform how to clear with my condition.

     

    Thanks,

  2. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 26 Sep 2017 Link to this post

    Hi Richard,

    When a PostBack control is placed inside an Update panel it updates only the other controls inside the panel, but not the ones outside it. This is not something specific to our controls, but is the main concept of the asynchronous post back updates.

    You can either move RadEditor inside the update panel holding the Button or consider the usage of RadAjaxManager instead of UpdatePanel, so you can configure all controls that will be updated when the button is clicked:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/overview

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Richard P
    Richard P avatar
    3 posts
    Member since:
    Jun 2017

    Posted 27 Sep 2017 Link to this post

    I already using <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> in My masterpage.

    Actually i need Auto save in Radeditor like this link http://demos.telerik.com/aspnet-ajax/editor/examples/autosave/defaultvb.aspx?show-source=true

    And it work when radeditor not inside updatepanel like the example above. Could you give me sample that auto save radeditor that inside update panel ?

     

  4. Rumen
    Admin
    Rumen avatar
    14103 posts

    Posted 28 Sep 2017 Link to this post

    Hi Richard,

    Here you are the requested example with an UpdatePanel:

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                lbl1.InnerHtml = RadEditor1.Content;
            }
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            lbl1.InnerHtml = RadEditor1.Content;
        }
    </script>
    <script type="text/javascript">
        var initialSeconds = 5;
        var currentSeconds = initialSeconds;
        var interval = null;
     
        function OnClientLoad(sender, args) {
            var timer = $find("<%= Timer1.ClientID%>");
            startCounter();
     
            //Attach to the spellCheckLoaded event as the spell itself is loaded with AJAX
            sender.add_spellCheckLoaded(function () {
                var spell = sender.get_ajaxSpellCheck();
     
                spell.add_spellCheckStart(function (sender, args) {
                    timer._stopTimer();
     
                    //Stop counter
                    stopCounter();
                });
     
                spell.add_spellCheckEnd(function (sender, args) {
                    //Restart the timer;
                    timer._startTimer();
     
                    //Restart counter
                    startCounter();
                });
            });
        }
     
        function startCounter() {
            if (!interval) {
                currentSeconds = initialSeconds;
                interval = window.setInterval(function () {
                    if (currentSeconds > 0) {
                        currentSeconds--;
                    }
                    else {
                        currentSeconds = initialSeconds;
                    }
     
                    var span = document.getElementById("remainingSeconds");
                    span.innerHTML = currentSeconds;
     
                }, 1000);
            };
        };
     
        function stopCounter() {
            if (interval) window.clearInterval(interval);
            interval = null;
        };
    </script>
    <head runat="server">
        <title>Style sheets order</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
     
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    RadEditor content will be automatically saved after <span id="remainingSeconds"></span> seconds.
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad" ContentAreaMode="Div" Width="600px">
                <Content>test</Content>
            </telerik:RadEditor>
                    <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
                    <div runat="server" id="lbl1"></div>
     
                </ContentTemplate>
            </asp:UpdatePanel>
     
        </form>
    </body>
    </html>


    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top