radEditor setFocus problem

[Dean Hunter]

Hi,

I am trying to set focus back on the radEditor after saving the contents.  Also setting the cursor to the end of the text.

I have the following scripts set up from looking at these forums.  The error I get 'Object doesn't support this property or method' on the setFocus() call.

            Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args) {
                var btnSave = $get("<%=btnDocumentSave.ClientID%>");
                btnSave.click();
                focusRadEditor();
            };

            function focusRadEditor() {
                var docEditor = document.getElementById('<%=Page.Master.FindControl("cphMain").FindControl("DocumentEditor1").FindControl("tbDocumentSource").ClientID%>');
                docEditor.setFocus();
                var contents = docEditor.get_document();
                contents.execCommand("SelectAll", null, false);
                //Collapse selection to the end
                docEditor.getSelection().collapse();
            }

Anyone know what I'm doing wrong?  I'm using Q3 2008 build, and IE6.

[Dean Hunter]

ok,  I no longer have a problem with 'Object doesn't support this property or method'.  I am now passing the editor object between the two methods instead of doing a find to get hold of it.

The problem now is 'htmlfile: Could not complete the operation due to error 800a025e.'  The line of code that causes this to break is 'var rng=this._window.document.selection.createRange();'.  I think this must be selecting the document text???

[Svetlina Anati]

Hello Dean,

What I can suggest for your case is to use the editor's OnClientLoadLoad event of the editor and ste teh focus as shown below:

 <script type="text/javascript">
   function OnClientLoad(sender, args)
   {
      //set the focus on the the editor
      setTimeout(function(){sender.setFocus();}, 0);
   }

    </script>

Let me know whether this works for you.


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

[Dean Hunter]

Hello Svetlina,

I'm not too sure what you mean to do with the set focus onclientload event.  Would this fire after the save event?

I have the setFocus method working (well at least not giving a scripting error).  Currently after the save event it is doing the focus code, however the focus is not set to the radEditor, the focus will be set to either the master page content or aspx page, not the radEditor on the ascx control.

My code is now as follows. (I think  the lines I have commented out bellow are causing the error in my previous post, though this may be because it isn't setting focus on the editor...)

            Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args) {
                var btnSave = $get("<%=btnDocumentSave.ClientID%>");
                btnSave.click();
                focusRadEditor(editor, args);
            };

            function focusRadEditor(docEditor, args) {
                setTimeout(function() {
                    docEditor.setFocus();
                    //var contents = docEditor.get_document();
                    //contents.execCommand("SelectAll", null, false);
                    //docEditor.getSelection().collapse();
                }, 0);
            }

I would like the user to be able to save the content of the radEditor, and then set focus back to the editor with the cursor at the end of the text.

Thanks for your Help.

Dean

[Rumen]

Hi Dean,

I noticed that you programmatically click a btnSave button using btnSave.click(); in the Telerik.Web.UI.Editor.CommandList["Save"] function. Note that the click() method produces a postback or ajax callback depending on your code. However the focusRadEditor(editor, args); will be executed before the postback / ajax callback and the focus will be not set in the editor.

You should set the focus in the OnClientLoad event of RadEditor which is fired after the postback or ajax callback.
Here is a solution:

    <script type="text/javascript">
    function OnClientLoad(docEditor, args)
    {
        //set the focus on the the editor
        setTimeout(function(){
        docEditor.setFocus();
        var contents = docEditor.get_document();
        contents.execCommand("SelectAll", null, false);
        //Collapse selection to the end
        docEditor.getSelection().collapse();
        }, 0);
    }
    </script>
    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Save" />
            </telerik:EditorToolGroup>
        </Tools>
    </telerik:RadEditor>
    <asp:Button style="display:none;" ID="btnDocumentSave" runat="server" Text="Save"></asp:Button>
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args) {
        var btnSave = $get("<%=btnDocumentSave.ClientID%>");
        btnSave.click();
    };
    </script>

The solution works in UpdatePanel too:

    <script type="text/javascript">
    function OnClientLoad(docEditor, args)
    {
        //set the focus on the the editor
        setTimeout(function(){
        docEditor.setFocus();
        var contents = docEditor.get_document();
        contents.execCommand("SelectAll", null, false);
        //Collapse selection to the end
        docEditor.getSelection().collapse();
        }, 0);
    }
    </script>
    <asp:UpdatePanel ID="UP" runat="server">
        <ContentTemplate>

            <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Save" />
                    </telerik:EditorToolGroup>
                </Tools>
            </telerik:RadEditor>
            <asp:Button style="display:none;" ID="btnDocumentSave" runat="server" Text="Save"></asp:Button>

        </ContentTemplate>
    </asp:UpdatePanel>

    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args) {
        var btnSave = $get("<%=btnDocumentSave.ClientID%>");
        btnSave.click();
    };
    </script>

Sincerely yours,
Rumen
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.

[Dean Hunter]

That has fixed my problem.

Thankyou

[Kott]

But how can we retain the cursor position at the position where it was.

ie, I have custom dropdown list. I used to do some pastehtml server side script which loses cursor position. I want to have the cursor position after the new content is placed.

My RadEditor Tag is as follows:

<telerik:RadEditor runat="server" ID="radContent" EditModes="Design,Html" ContentFilters="DefaultFilters,PdfExportFilter"
                                                OnClientCommandExecuting="changeImageManager" Height="800" Width="850" SpellCheckSettings-AllowAddCustom="true"
                                                OnClientPasteHtml="OnClientPasteHtml" OnClientLoad="OnClientLoad"
                                                ToolsFile="~/Styles/ToolsFile.xml" TableLayoutCssFile="~/Styles/TableLayoutCss.css">
                                                <ExportSettings OpenInNewWindow="true" />
                                                <ImageManager ViewPaths="~/Documents" UploadPaths="~/Documents" MaxUploadFileSize="5120000"
                                                    SearchPatterns="*.gif, *.jpg, *.png, *.bmp" DeletePaths="~/Documents"></ImageManager>
                                                <Tools>
                                                    <telerik:EditorToolGroup>
                                                        <telerik:EditorDropDown Name="Data" Text="Well Information" Width="130" ItemsPerRow="1" PopupWidth="150" PopupHeight="150">
                                                            <telerik:EditorDropDownItem Name="Well Targets" Value="1" />
                                                            <telerik:EditorDropDownItem Name="Logging Requirements" Value="2" />
                                                            <telerik:EditorDropDownItem Name="Geological Prognosis" Value="3" />
                                                            <telerik:EditorDropDownItem Name="Pressure Information" Value="4" />
                                                            <telerik:EditorDropDownItem Name="Well Head Location" Value="5" />
                                                            <telerik:EditorDropDownItem Name="Easting" Value="6" />
                                                            <telerik:EditorDropDownItem Name="Northing" Value="7" />
                                                            <telerik:EditorDropDownItem Name="Assumed DFE" Value="8" />
                                                        </telerik:EditorDropDown>
                                                    </telerik:EditorToolGroup>
                                                </Tools>
                                                <CssFiles>
                                                    <telerik:EditorCssFile Value="~/Styles/EditorContentAreaStyles.css" />
                                                </CssFiles>
                                            </telerik:RadEditor>

My dropdownlist script functionality is as follows:

Telerik.Web.UI.Editor.CommandList["Data"] = function(commandName, editor, args)
                                                {
                                                   var val = args.get_value();
                                                   if (val == 1)
                                                   {
                                                       editor.pasteHtml("[TARGETS]");

                                                       if (document.getElementById("ctl00_ContentPlaceHolder1_apWellHeaderDetails_content_rblIsPilot_0").checked)
                                                       {
                                                            editor.pasteHtml("[PILOTTARGETS]");
                                                       }

                                                       var btnInsertTrajectory = $get("<%=btnInsertTrajectory.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertTrajectory.click(); //click it programmatically
                                                       //Cancel the further execution of the command as such a command does not exist in the editor command list
                                                       // args.set_cancel(true);
                                                   }
                                                   else if (val == 2)
                                                   {
                                                       editor.pasteHtml("[LOGS]");
                                                       var btnInsertLogs = $get("<%=btnInsertLogs.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertLogs.click(); //click it programmatically
                                                   }
                                                   else if (val == 3)
                                                   {
                                                       editor.pasteHtml("[PROGNOSIS]");
                                                       if (document.getElementById("ctl00_ContentPlaceHolder1_apWellHeaderDetails_content_rblIsPilot_0").checked)
                                                       {
                                                            editor.pasteHtml("[PILOTPROGNOSIS]");
                                                       }
                                                       var btnInsertPrognosis = $get("<%=btnInsertPrognosis.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertPrognosis.click(); //click it programmatically
                                                   }
                                                   else if (val == 4)
                                                   {
                                                       editor.pasteHtml("[PRESSURE]");
                                                       var btnInsertPressure = $get("<%=btnInsertPressure.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertPressure.click(); //click it programmatically
                                                   }
                                                   else if (val == 5)
                                                   {
                                                       editor.pasteHtml("[WELL_LOCATION]");
                                                       var btnInsertWellHeadLocation = $get("<%=btnInsertWellHeadLocation.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertWellHeadLocation.click(); //click it programmatically
                                                   }
                                                   else if (val == 6)
                                                   {
                                                       editor.pasteHtml("[EASTING]");
                                                       var btnInsertEasting = $get("<%=btnInsertEasting.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertEasting.click(); //click it programmatically
                                                   }
                                                   else if (val == 7)
                                                   {
                                                       editor.pasteHtml("[NORTHING]");
                                                       var btnInsertNorthing = $get("<%=btnInsertNorthing.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertNorthing.click(); //click it programmatically
                                                   }
                                                   else if (val == 8)
                                                   {
                                                       editor.pasteHtml("[DFE]");
                                                       var btnInsertDFE = $get("<%=btnInsertDFE.ClientID%>"); //get a reference to the Asp:Button
                                                       btnInsertDFE.click(); //click it programmatically
                                                   }
                                                   editor.setFocus()
                                                };

My onClientLoad fn is as follows:

function OnClientLoad(sender, args)
{
    //set the focus on the the editor
    setTimeout(function()
    {
    sender.setFocus();
    var contents = sender.get_document();
    contents.execCommand("SelectAll", null, false);
    //Collapse selection to the end
    sender.getSelection().collapse();
    }, 0);
};

  

Here the cursor is moved at the end of the document. Please help to retain the position of cursor...

 

[Rumen]

Hi,

You can try to save the cursor position and restore it using the information in this article: getRange.
If you need further help open a support ticket and send a simple fully working project that demonstrates the problem.

Best regards,
Rumen
the Telerik team