RadEditor: Blur-focus after ajax request

Posted by Community Admin on 15-Sep-2011 00:00

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.

Posted by Community Admin on 16-Sep-2011 00:00

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?

Posted by Community Admin on 16-Sep-2011 00:00

Anyone, help me...

Posted by Community Admin on 21-Sep-2011 00:00

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

Posted by Community Admin on 25-Sep-2011 00:00

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();

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.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.

Posted by Community Admin on 29-Sep-2011 00:00

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

This thread is closed

All Replies