1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / RadEditor: Blur-focus after ajax request

RadEditor: Blur-focus after ajax request

6 posts, 0 answered
  1. Misha
    Misha avatar
    4 posts
    Registered:
    15 Sep 2011
    15 Sep 2011
    Link to this post
    Hello.
    I use property of radeditor ToolBarMode=ShowOnFocus in radeditor. After any changing of content of radeditor - options, text, everything and of cause, on blur event I should send ajax request on server to save this all.
    After blur or keyup events and sending this events on server - focus becomes on toolbar, and I can't input any symbol into radeditor. And it happens only after ajax request.
    Please, help me.  
  2. Misha
    Misha avatar
    4 posts
    Registered:
    15 Sep 2011
    16 Sep 2011
    Link to this post
    In additional for previous post:
      
    <rad:RadEditor 
    ID
    ="radeditor" ContentAreaMode="Div" ToolsWidth="340px" Width="340px" runat="server" Height="200px" 
            ToolBarMode="ShowOnFocus"
    
    OnClientLoad="editorOnClientLoad">
    </
    rad:RadEdaditor>

    <rad:RadCodeBlock ID="RCB" runat="server">
    <script type="text/javascript">
    

     
    editorOnClientLoad: function (editor) 
    { 
            editor.attachEventHandler("blur"function (e) {
               var html = editor.get_html(true);
                ajaxRequest(html);
     	});}
    </script>
    </rad:RadCodeBlock>
    And after request focus on toolbar of editor, and after clicking on content area - focus again becomes on toolbar. How to fix it?
  3. Misha
    Misha avatar
    4 posts
    Registered:
    15 Sep 2011
    16 Sep 2011
    Link to this post
    Anyone, help me...
  4. Rumen
    Rumen avatar
    26 posts
    Registered:
    27 Jul 2017
    21 Sep 2011
    Link to this post
    Hello Misha,

    Try to hide the toolbar when the blur event occurs:

    var tWnd= editor.get_toolAdapter().get_window();
    tWnd.hide();


    All the best,
    Rumen
    the Telerik team
    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 their blog feed now
  5. Misha
    Misha avatar
    4 posts
    Registered:
    15 Sep 2011
    25 Sep 2011
    Link to this post
    Hello, suppose for quick answer, because its critical for me, and i spend a lot of time to figure out of behaviour of you RadEditor.
    I prepared example, and I'll describe bugs and issues with this control.

    /// Default.aspx
    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="RadeditorShowOnFocusBlurFocusAjax._Default" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxMan" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadAjaxManagerProxy ID="RadAjaxProxy" runat="server">
        </telerik:RadAjaxManagerProxy>
        <div id="reInput" runat="server" style="float:left; margin-right:100px;">
            <telerik:RadEditor ContentAreaMode="Div" runat="server" ID="RE" SkinID="DefaultSetOfTools" Height="200" Width="360" ToolsWidth="360"
            OnClientLoad="EditorLoaded"<br>
            OnClientCommandExecuting="EditorCmdExecuting"
            OnClientCommandExecuted="EditorCmdExecuted">
            </telerik:RadEditor>
        </div>
        <div id="Result" runat="server">
             <h1><b>Result</b></h1>
        </div>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
          <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
          function EditorLoaded (editor, args) {
                    var ajaxManager = $find("<%= RadAjaxMan.ClientID %>");
                    var element = document.all ? editor.get_document().body : editor.get_document();
                    $("#<%= Result.ClientID %>").html(editor.get_html());
                    ajaxManager.ajaxRequest(editor.get_html());
                }
                 
                function EditorCmdExecuted (editor, args) {
                   // alert('some command executed');
                    var ajaxManager = $find("<%= RadAjaxMan.ClientID %>");
                    var element = document.all ? editor.get_document().body : editor.get_document();
                    $("#<%= Result.ClientID %>").html(editor.get_html());
                    ajaxManager.ajaxRequest(editor.get_html());
                    //EVEN THIS DOESn't Help!!!!!!!!!!!!!!!
                    editor.set_Focus();
                    editor.set_Focus();
                }
                 function EditorCmdExecuting(editor){
               
                 }
                $(document).ready(function () {
      
               });
                       
            </script>
        </telerik:RadCodeBlock>
    </asp:Content>

    ///Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;>
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using Telerik.Web.UI;
    using Telerik.Web.UI.Editor;

    namespace RadeditorShowOnFocusBlurFocusAjax {
        public partial class _Default : System.Web.UI.Page {
            protected void Page_Load(object sender, EventArgs e) {
                if(!IsPostBack)
                {
                  ConfigureFloatRadEditor(RE);
                }
                Result.InnerHtml="result";
                   RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
                  manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
               }
            protected void manager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
            {
                  Result.InnerHtml="Somethis";
                  SaveSomething();
                   
            }
            public void SaveSomething(){
                //save this.
            }
            /// <summary>
            /// Configure show on focus RadEditor
            /// </summary>
            /// <param name="radEditor">Rad Editor Control</param>
            private void ConfigureFloatRadEditor(RadEditor radEditor) {
                ConfigureRadEditor(radEditor, "en-US");
               
                radEditor.Tools.Clear();
                EditorToolGroup formatBar = new EditorToolGroup();
                formatBar.Tools.Add(new EditorTool("FontName"));
                formatBar.Tools.Add(new EditorTool("RealFontSize"));
                formatBar.Tools.Add(new EditorSeparator());
                formatBar.Tools.Add(new EditorTool("Bold"));
                formatBar.Tools.Add(new EditorTool("Italic"));
                formatBar.Tools.Add(new EditorTool("Underline"));
                formatBar.Tools.Add(new EditorSeparator());
                formatBar.Tools.Add(new EditorTool("ForeColor"));
                formatBar.Tools.Add(new EditorTool("JustifyLeft"));
                formatBar.Tools.Add(new EditorTool("JustifyCenter"));
                formatBar.Tools.Add(new EditorTool("JustifyRight"));
                radEditor.Tools.Add(formatBar);
                radEditor.ToolbarMode=EditorToolbarMode.ShowOnFocus;
            }

            public void ConfigureRadEditor(RadEditor radEditor, string contentLanguage) {
                radEditor.StripFormattingOptions = EditorStripFormattingOptions.All;
                radEditor.EditModes = EditModes.Design;
                radEditor.EnableResize = false;
                radEditor.NewLineMode = EditorNewLineModes.Div;
                radEditor.Modules.Clear();
                radEditor.Snippets.Clear();
                radEditor.CssClasses.Clear();
                radEditor.Links.Clear();
            }
        }
    }



    1. I need that, radeditor with ShowOnFocus get the same behavior as without ajax request. Because, after ajax request toolbar of radeditor dissapears, for example, on clicking on forecolor colorpicker or other split buttons in the toolbar. It disappears, after hotkeys pressed (for me its very critical), it disappears on enter, or after clicking any command - bold, italic etc. But without ajax request it works perfect.
    2. I need ajax request on Blur event for whole radeditor, again it should works normaly.
    3. In IE7-IE9 - selection of selected text disappears on clicking on forecolor command, so user can't to change color of text. Its already see on telerik's demo.
    4. Very strange bug in FireFox - when user select whole text in editor, then apply "Bold", for example and after that clicks on alignment options - text in radeditor disappears.

    Could you explain, how to fix this, and correctly implement?
    I need ajax request on blur, on command executed, onclientload, on keyup. Please, help me with this.

    Best regards, Misha.
  6. Dobromir
    Dobromir avatar
    1 posts
    Registered:
    24 Sep 2012
    29 Sep 2011
    Link to this post
    Hi Misha,

    I already answered your support ticket on the subject. For convenience I will paste my answer here as well:

    I have logged this issue into our database for further investigation and we will do our best to handle it for one of the upcoming releases.

    For the time being, you can force the toolbar to appear using the following code snippet:
    function EditorCmdExecuted (editor, args) {
       // alert('some command executed');
        var ajaxManager = $find("<%= RadAjaxMan.ClientID %>");
        var element = document.all ? editor.get_document().body : editor.get_document();
        $("#<%= Result.ClientID %>").html(editor.get_html());
      
      
        ajaxManager.ajaxRequest(editor.get_html());
      
        editor.get_toolAdapter()._showToolbarHolder(true);//force the toolbar to appaer
    }

    Please note that _showToolbarHolder() is a private method this should not be used as a permanent solution

    Best wishes,
    Dobromir
    the Telerik team
    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 their blog feed now
6 posts, 0 answered