Set Focus on RadEditor Content within a UserControl

[Majid]

I have a RadEditor in a user control, which is being used on a page. What I need to do is verify if the content area on the editor is not blank on button click on client side (and display alert message) And then I need to set focus in the content area on the editor.

I'm able to do everything except set the focus.

When I try to set focus, I get a message saying "Cant move focus to the control because it is invisible, not enabled, or of a type that does not accept focus"

I figured out this is becase the style:display is set to "none". I updated that to "block" and the error message went away, but I still dont see the focus being set.

Please advice.

 

Thanks 

[Rumen]

Hi Majid,

How do you try to set the focus? Do you use the setFocus method of RadEditor as it is shown in this help article: http://www.telerik.com/help/aspnet-ajax/editor_setfocus.html

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Majid]

I have tried that too, but was'nt successful with that.
This is what I'm currently doing (so that I can avoid the "unable to set focus" error message)
This is client script on the aspx.cs page

var editor = document.getElementById('"

+ userControl1.ClientID.Replace("_", "$") + @"$editor');

 

editor.style.display = 'block';

editor.focus();
where userControl1 is the usercontrol in which a radeditor is used, along with some other controls.
I have also tried setting a timeout, I found a note about it that sometimes control focus gets locked but that has'nt helped either.
window.setTimeout(function(){editor.focus()},100);

Thanks
Majid

 

[Nikolay Raykov]

Hello Majid,

You should call the client API method setFocus() on the editor object instead of focus() on the editor wrapper element. You cannot set the focus of the content area simply by calling focus(). Calling focus() will have an effect only on standart HTML controls. The content area of the RadEditor is something different - it is an IFrame. So the right function to set the focus is setFocus().

var editor = $find('" + userControl1.ClientID + @"_editor');

editor.setFocus();

....

Kind regards,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David Jackson]

this is not working for me:

var

 

editor = $find('<%= this.uxQuestion.ClientID%>');

 

editor.setFocus();

the editor is being set to null.  Can you please let me know what I'm doing wrong.

[Rumen]

Hi David,

It seems that you execute this script before the initialization of editor control. The solution is to get a reference to the editor from the OnClientLoad event of the editor, e.g.

<script type="text/javascript">
function OnClientLoad(editor, args)
{                  
   var editorObject = editor;
   //set the focus in the editor
   setTimeout(function()
   {
        editorObject.setFocus();
   }, 10);
}
</script>
<telerik:radeditor
   runat="server"
   ID="RadEditor1"
   OnClientLoad="OnClientLoad"
></telerik:radeditor>

You can also see this article: Getting a Reference to RadEditor.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[David Jackson]

When I do this, I get the error message: "Object doesn't support this property or method" when I call the setFocus() method.  The class name of the editorObject is "RadEContent".

Sorry - it's SetFocus() not setFocus().  The solution you gave me works.  Thanks.

[Rumen]

Hello David,

I am glad that you found a solution for your scenario.

I just wand to mark that you are using the classic version of RadEditor, but not RadEditor for ASP.NET AJAX. The provided solution in my previous post applies to RadEditor for ASP.NET AJAX.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Zed]

I tried this and could not get it to work.  if I use SetFocus() it says not supported.  I want to see a blinking cursor inside the text editor.  After the page loads nothing has focus on the page.

[Rumen]

Hi Zed,
 
For your convenience I have created and attached a sample fully working project which demonstrates that the setFocus works as expected. I can also included a video showing my test.

Please, test the project and let me know if you still experience the problem.

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Zed]

I did get it to work.  I cannot remember what the problem was.

[TonyG]

I am having a problem setting focus on a RadTextBox. I thought this thread would apply because this is a wrapper around RadInput like the RadEditor.

I got the exact same errors described by Majid:

var box = document.getElementById('<%=PasswordTextbox.ClientID%>');
if (box) {
  try {
    // box.focus(); // returns error about control being invisible
    // box.setFocus(); // returns error that object doesn't support method
    box.SetFocus(); // same
  } catch (ex) {
    radalert(
      "Could not set focus on textbox:<br />"
      + "Error name: " + ex.name + ".<br />"
      + " Error message: " + ex.message);
  }
}

The function containing the above code is in a RadCodeBlock in a UserControl. Variable "box" does have an object.

I was wondering if focus() needs to be set on the Text field within the RadTextBox. So I tried various things like:

var text = $get("text",box); // no luck with different objects and casing

I think the solution to this problem, even in this RadEditor forum, will help solve a whole class of similar issues.

[Lini]

Hello,

Please read the following help article on setting focus in the telerik input controls - http://www.telerik.com/help/aspnet-ajax/input_commonfocus.html

The article has some sample code that shows how to set focus using JavaScript. Looking at your code, I think the problem is that you are not getting a reference to the textbox using the $find() method of the ASP.NET AJAX framework - e.g. you should have:

var box = $find("<%= PasswordTextbox.ClientID %>");
box.focus();

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[TonyG]

Lini, I don't know why but even with $find, focus is just set back on the same RadTextBox that's triggering the event.

Here is a more complete picture. I am doing a common login with User and Password. When the user presses Enter after typing their ID, I want focus to set on the Password box. When they hit Enter from Password, the submit button click event is fired. The latter part is working, it's the Enter from User to Password that is not working. The function is provided below, all error handling has been eliminated and the code has been expanded a little to facilitate debugging.

function KeyPressed(ctrl, e) {
  if (e.get_domEvent().rawEvent.keyCode == 13) {
    var ID = ctrl.get_id();
    var pos = ID.indexOf("UsernameTextbox");
    if (pos >= 0) {
      var box = $find("<%= PasswordTextbox.ClientID %>");
      if (box !== null) {
        box.focus();
      }
    }
    else {
      pos = ID.indexOf("PasswordTextbox");
      if (pos >= 0) {
        var button = $get('<%= LoginButton.ClientID %>');
        if (button !== null) {
          button.click();
        }
      }
    }
    e.get_domEvent().preventDefault();
    e.get_domEvent().stopPropagation();
  }
}

It's fairly obvious that box.focus() won't be executed unless the Password RadTextBox is found. In debug I can see that 'box' is an object and the ID is indeed the password box. But on exit from this method, the text in UsernameTextbox is highlighted and the cursor is positioned at the end of the text in that box - not positioned in the password box. I've verified this behavior in IE7 and IE8.

BTW, following in debug I do see that .focus() sets to the _text object in the proper textbox - I was concerned before that we may need to do this ourselves.

And in case someone is curious, I have set TabIndex values of the user box to 1 and the password box to 2, so I don't think that is affecting this.

Any other ideas?
Thanks for your time.

[Dimo]

Hi Tony,

I tested your script and it works fine on my side. Please review the following demo and let me know if I am missing something.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (rtbUserName.Text == "MyUser" && rtbPassword.Text == "MyPass")
        {
            Label1.Text = "Login correct!";
        }
        else
        {
            Label1.Text = "Login failed!";
        }
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>Login with "MyUser" and "MyPass":</p>

<telerik:RadTextBox ID="rtbUserName" runat="server" ClientEvents-OnKeyPress="KeyPressed" />

<br /><br />

<telerik:RadTextBox ID="rtbPassword" runat="server" ClientEvents-OnKeyPress="KeyPressed" />

<br /><br />

<asp:Button ID="btnSubmit" runat="server" Text="Login" OnClick="btnSubmit_Click" />

<br /><br />

<asp:Label ID="Label1" runat="server" Text="" />

<script type="text/javascript">

function KeyPressed(ctrl, e) {
  if (e.get_domEvent().rawEvent.keyCode == 13) {
    var ID = ctrl.get_id();
    var pos = ID.indexOf("rtbUserName");
    if (pos >= 0) {
      var box = $find("<%= rtbPassword.ClientID %>");
      if (box !== null) {
        box.focus();
      }
    }
    else {
      pos = ID.indexOf("rtbPassword");
      if (pos >= 0) {
        var button = $get('<%= btnSubmit.ClientID %>');
        if (button !== null) {
          button.click();
        }
      }
    }
    e.get_domEvent().preventDefault();
    e.get_domEvent().stopPropagation();
  }
}

</script>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[TonyG]

Dimo - as always, thanks for your feedback.
I tried the code provided with no changes and in Firefox 3.5.3 it works as expected.
However, I tested in IE7 and IE8 and it functions exactly the same on my systems as my own code. Again, rather than focus moving from userID to password, all text in userID is selected on .focus().
I'm using Telerik.Web.UI 2009.3.1208.35.  Haven't upgraded to latest yet.

Is this an "IE" issue, or is it a "Telerik" issue?
Or is it a Telerik issue because it's an IE issue that needs to be overcome? ;)

Thanks again!

[Dimo]

Hello Tony,

Indeed, the problem is in the RadControls version that you are using. The latest one works as expected.

Please change the KeyPress handler as follows, in order to work with your current version:

function KeyPressed(ctrl, e) {

  if (e.get_domEvent().rawEvent.keyCode == 13) {
    var ID = ctrl.get_id();
    var pos = ID.indexOf("rtbUserName");
    if (pos >= 0) {
      var box = $find("<%= rtbPassword.ClientID %>");
      if (box !== null) {
        e.set_cancel(true);
        setTimeout(function(){box.focus();}, 1);
      }
    }
    else {
      pos = ID.indexOf("rtbPassword");
      if (pos >= 0) {
        var button = $get('<%= btnSubmit.ClientID %>');
        if (button !== null) {
          button.click();
        }
      }
    }
    e.get_domEvent().preventDefault();
    e.get_domEvent().stopPropagation();
  }
}

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Darren]

Hello,

Ive been reading this thread, but none of this seems to work when you have multiple user controls on your page, each containing a RadEditor controls (ajax anabled).  I have this scenario, with each user control sitting within a RadPageView, on selecting the relevant tab, I want focus to go to the RadEditor control within the user control for that tab. 

I cant use OnClientLoad to get a reference to the editor, as this event get triggered for every user control when the page loads.

I cant use  $find("<%=rdedContent.ClientID%>") (within my user control), as this only seems to return the RadEditor in the last user control to appear on the page.

Any help appreciated

thanks

Darren

[Dobromir]

Hi Darren,

You can use the RadTabStrip's OnClientTabSelected client-side event to set focus to the editor when the PageView is displayed. Please, find a solution for this scenario in the attached sample project.

Sincerely yours,
Dobromir
the Telerik team

[Darren]

Hi Dobromir

Thanks for the help, this is exactly what i was looking for.

Darren

[Ganesh]

Hi,
i have a RadEditor in a usercontrol which is used 4- 5 times in the aspx page

the problem is that in IE, when the Document Mode is IE8 Standards (developer tool bar) at that time the cursor always points the start of the line, though if i continue to write it write at the end but the cursor position point to the start of that line

but if i change the Document Mode  to IE7 Standards it works fine.

i don't have any blur functionality on RadEditor
i have a OnClientLoad="onTemplateEditorClientLoad"

which has the following functionality

function onTemplateEditorClientLoad(editor) {
    var contentArea = editor.get_contentArea();
    $(contentArea).keypress(function () {
        lock.changeDetector.CallActionOnce();
    });
};

[Ianko]

Hi Ganesh,

I am unable to reproduce the problem on my end. It would be helpful if you could open a support ticket with more details about the problem and provide a simple project, which isolates the problem, so that I could investigate it. 

Regards,
Ianko
Telerik