Set Focus on RadEditor Content within a UserControl

22 posts, 0 answers
  1. Majid
    Majid avatar
    2 posts
    Member since:
    Oct 2008

    Posted 26 Nov 2008 Link to this post

    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 

  2. Rumen
    Admin
    Rumen avatar
    14469 posts

    Posted 26 Nov 2008 Link to this post

    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.
  3. Majid
    Majid avatar
    2 posts
    Member since:
    Oct 2008

    Posted 26 Nov 2008 Link to this post

    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

     

  4. Nikolay Raykov
    Admin
    Nikolay Raykov avatar
    102 posts

    Posted 02 Dec 2008 Link to this post

    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.
  5. David Jackson
    David Jackson avatar
    2 posts
    Member since:
    Mar 2008

    Posted 10 May 2009 Link to this post

    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.

  6. Rumen
    Admin
    Rumen avatar
    14469 posts

    Posted 11 May 2009 Link to this post

    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.
  7. David Jackson
    David Jackson avatar
    2 posts
    Member since:
    Mar 2008

    Posted 11 May 2009 Link to this post

    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.
  8. Rumen
    Admin
    Rumen avatar
    14469 posts

    Posted 11 May 2009 Link to this post

    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.
  9. Zed
    Zed avatar
    74 posts
    Member since:
    Apr 2008

    Posted 23 Jun 2009 Link to this post

    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.
  10. Rumen
    Admin
    Rumen avatar
    14469 posts

    Posted 26 Jun 2009 Link to this post

    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.
  11. Zed
    Zed avatar
    74 posts
    Member since:
    Apr 2008

    Posted 26 Jun 2009 Link to this post

    I did get it to work.  I cannot remember what the problem was.
  12. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 25 Jan 2010 Link to this post

    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.
  13. Lini
    Admin
    Lini avatar
    2150 posts

    Posted 26 Jan 2010 Link to this post

    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.
  14. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 26 Jan 2010 Link to this post

    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.
  15. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 27 Jan 2010 Link to this post

    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"
     
    <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.
  16. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 27 Jan 2010 Link to this post

    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!

  17. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 29 Jan 2010 Link to this post

    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.
  18. Darren
    Darren avatar
    6 posts
    Member since:
    Apr 2008

    Posted 08 Sep 2010 Link to this post

    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

  19. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 13 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  20. Darren
    Darren avatar
    6 posts
    Member since:
    Apr 2008

    Posted 13 Sep 2010 Link to this post

    Hi Dobromir

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

    Darren
  21. Ganesh
    Ganesh avatar
    3 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    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();
        });
    };
  22. Ianko
    Admin
    Ianko avatar
    1956 posts

    Posted 13 Nov 2013 Link to this post

    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
    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.
Back to Top