[Solved] Get Focus on edit pane of Editor control w/o click

[Michael]

Would you mind letting me know how to get focus set to the edit pane of the Rad Editor control without a mouse click.  I've tried all the standard Javascript functions I can think of, but to no avail.  There must be something I'm missing.

Thanks in advance!

[Tervel]

Hello Michael,

You can call the RadEditor client-API method setFocus(), e.g.

var editor = $find("<%=RadEditor1.ClientID%>");
editor.setFocus();

The RadEditor Client-side API is discussed in the following help article:
http://www.telerik.com/help/aspnet-ajax/editor-getting-familiar-with-client-side-api.html

Best regards,
Tervel
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.

[Michael]

Thank you for this response.  In fact, I had already tried this code.  However, I must not be understanding something about the sequence of event firing on the page, because when I add this code inside the Javascript script tags at the end of my page I get an "editor is null or not an object" error.

The page I'm working with doesn't have any other controls (e.g., textboxes, etc.) on it, apart from the Rad editor and a "Save and Close" button.  Thus, on page load I need to fire code that brings the focus into the Rad editor.

Am I placing the code you provided in the wrong spot?  Any further suggestions?  Thank you!

[Tervel]

Hello Michael,

All MS AJAX controls (and Telerik RadControls are such) are created on page load.
Hence, they do not exist prior to loading the page, and if you just dump the code that I sent you in a script tag, the $find method would return null.

One option you can use is the MS AJAX special client method called pageLoad which is executed automatically when the page is loaded an initialized, e.g.

function pageLoad()
{
   var editor = $find("<%=RadEditor1.ClientID%>");
  editor.setFocus();
}



Best regards,
Tervel
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.

[Michael]

Thank you, but I'm still not having success.  Here's the code you gave me as I've added it:

<script type="text/javascript">
    function pageLoad()
        {
            var editor = $find("<%=reDocumentElement.ClientID%>");
            editor.setFocus();
        }
</script>

Here is the editor control:

       <telerik:RadEditor runat="server" ContentFilters="defaultfilters" ID="reDocumentElement" Height="390px" Skin="Vista" StripFormattingOptions="MSWordNoFonts" StripFormattingOnPaste="MSWordRemoveAll">
            <CssFiles>
                <telerik:EditorCssFile Value="~/Skin/RecapFontEditorStyle.css" />
            </CssFiles>
            <Tools>
                <telerik:EditorToolGroup >
                    <telerik:EditorTool Name="InsertSymbol" />
                    <telerik:EditorTool Name="AjaxSpellCheck" />
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool name="FontName" />
                    <telerik:EditorTool Name="RealFontSize" />
                    <telerik:EditorTool name="ForeColor" />
                    <telerik:EditorTool Name="BackColor" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Indent" />
                    <telerik:EditorTool Name="Outdent" />
                    <telerik:EditorTool Name="InsertUnorderedList" />
                    <telerik:EditorTool Name="InsertOrderedList" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="JustifyCenter" />
                    <telerik:EditorTool Name="JustifyLeft" />
                    <telerik:EditorTool Name="JustifyRight" />
                    <telerik:EditorTool Name="JustifyFull" />
                    <telerik:EditorTool Name="JustifyNone" />
                </telerik:EditorToolGroup>
            </Tools>


            <RealFontSizes>
                <telerik:EditorRealFontSize Value="7pt" />
                <telerik:EditorRealFontSize Value="8pt" />
                <telerik:EditorRealFontSize Value="9pt" />
                <telerik:EditorRealFontSize Value="10pt" />
                <telerik:EditorRealFontSize Value="11pt" />
                <telerik:EditorRealFontSize Value="12pt" />
                <telerik:EditorRealFontSize Value="13pt" />
                <telerik:EditorRealFontSize Value="14pt" />
                <telerik:EditorRealFontSize Value="16pt" />
            </RealFontSizes>
            <Content>
            </Content>
        </telerik:RadEditor>

See anything amiss?  There is more Javascript on the page, but in testing I stripped everything non-essential out and we're still not getting focus.  Thanks for the help!

Michael

[Rumen]

Hi Michael,

Please, execute the code in the pageLoad() event after a small delay of time, e.g.

<script type="text/javascript">
function pageLoad()
    {
       setTimeout(function()
       {
        var editor = $find("<%=reDocumentElement.ClientID%>");
        editor.setFocus();
       }, 10);
    }
</script>

This should do the trick.

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

[Michael]

Works perfectly!  Thanks Rumen!