RadEditor - How to open Find-And-Replace outside of parent window

[Sandhia]

Hello

I want to be able to open the 'find-and-replace' popup outside of the parent RadEditor window.  Is there any way to do this?

Thanks
Raka

[Rumen]

Hi Raka,

The only way to popup the Find and Replace dialog outside of the parent window is to make it a browser dialog - https://www.telerik.com/support/kb/aspnet-ajax/details/using-browser-modal-dialog-instead-of-radwindow, e.g.

<script type="text/javascript">  
function OnClientLoad(editor)  
{  
    editor.set_useClassicDialogs(true);  
}  
</script>  
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad"  runat="server"></telerik:RadEditor> 

 

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

 

Thank you for your reply.  I tried this solution but OnClientLoad never gets executed...

Any ideas?

Thanks, Sandhia

[Rumen]

Hi Sandhia,

Do you get a JavaScript error? If you put a debugger or a console.log() / alert() inside the OnClientLoad function does it get called?

 

Is the editor available on the page when you call this script?

 

Regards,
Rumen
Progress Telerik

[Sandhia]

I tried that.  It is not going to OnClientLoad function :(

 

Thanks

Sandhia

[Rumen]

Hi Sandhia,

For your convenience, I created a simple website where the OnClientLoad gets executed. Please test and compare the settings of the project with yours.

Also, look for JavaScript errors in your project.

Regards,
Rumen
Progress Telerik

[Sandhia]

It works!  Thank you so much.

Sandhia

[Sandhia]

It works.  Thank you.

Raka

[Sandhia]

It works.  Just one more question.  How do I change the size of popup?  The height is not enough to show the 'close' button.

Thank you so much!

Raka

[Sandhia]

When I do a find and replace, I get 'get_popupElement' of undefined or null reference... error.

I cannot find 'get_popupElement' when I search my solution file.

Also the 'find-and-replace' popup is not sizable for me.  Am I missing some telerik js?

 

Thanks, Sandhia

[Sandhia]

More information.

In Chrome, the find-and-replace works; however the popup is still too small to show 'close' button and is not resizable.

In IE, same issue with size.  Also find-and-replace does not work and throws error about get_popupElement.

Thanks, Sandhia

[Rumen]

Hi Sandhia and Raka,

I am not getting any JS errors - I am testing with the latest version and the same project I attached earlier. Do you get the error in my project or in yours? 

You can resize the Find and Replace dialog as highlighted below:

 

        <script type="text/javascript">  
            function OnClientLoad(editor) {
                editor.set_useClassicDialogs(true);

                var dialogOpener = editor.get_dialogOpener();

                dialogOpener.get_dialogDefinitions()["FindAndReplace"].Width = "460px";
                dialogOpener.get_dialogDefinitions()["FindAndReplace"].Height = "650px";
            }
        </script>
        <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
            <content>some text</content>
        </telerik:RadEditor>

I tested in Chrome and IE11 with version 2020.2.617 and there aren't any errors:

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

Your website works perfectly.  It has error in mine.  

As I said, Chrome has less issues than IE but we need to get it working in both.  This resizing code you sent me helps with resizing.

 

The JS error of get_PopupElement seems to occur when it says 'search string not found'.  It seems to not find the same string after one or two tries.  The JS error is being thrown in Telerik.Web.UI.DialogHander in "ensureDialogVisible" method.  Please see below.

The string it claims it can't find, is there.  I copy it and paste it in 'find' window.  So whenever it thinks it can't find the string, it throws this error.

 

 

_ensureDialogIsVisible: function() {
var dialogWindow=this._getRadWindow();
if(!$telerik.isScrolledIntoView(dialogWindow.get_popupElement())) {        <------------ This is where error gets throws ------
dialogWindow.center();
}
},

 

Thanks, Raka

 

 

 

 

 

 

[Rumen]

Hi Raka, 

Would it be possible to provide a sample project and reliable reproduction steps so that I can replicate the error on my side? Please also include sample content for the test. Thank you!

Is the Find and Replace dialog also customized? RadEditor offers the ability to register its dialog files and modify their content as explained in this demo - https://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx. 

 

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

 

We have not customized any telerik dialogs.

It happens intermittently.  I am unable to share my project.  It seems like when I first bring up the application and try the RadEditor, it works fine but when I do the 'find-and-replace' second time, it gives error ' cannot find search string ' and then brings up the popup error (the one I sent you earlier).

 

Thanks

Raka

[Rumen]

Hi Raka,

Since it will be hard to troubleshoot the error without a repro, my advice is to register the External Dialogs of RadEditor

           <script type="text/javascript">  
            function OnClientLoad(editor) {
                editor.set_useClassicDialogs(true);

                var dialogOpener = editor.get_dialogOpener();

                dialogOpener.get_dialogDefinitions()["FindAndReplace"].Width = "460px";
                dialogOpener.get_dialogDefinitions()["FindAndReplace"].Height = "650px";
            }
           </script>
        <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server" ExternalDialogsPath="~/EditorDialogs">
            <content>some text</content>
        </telerik:RadEditor>

and to modify the

		_ensureDialogIsVisible: function() {
			var dialogWindow=this._getRadWindow();
			if(!$telerik.isScrolledIntoView(dialogWindow.get_popupElement())) {
				dialogWindow.center();
			}
		},

function in the \EditorDialogs\FindAndReplace.ascx file like this:

		_ensureDialogIsVisible: function() {
			//var dialogWindow=this._getRadWindow();
			//if(!$telerik.isScrolledIntoView(dialogWindow.get_popupElement())) {
			//	dialogWindow.center();
			//}
		},

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

We access DialogHander.aspx in our web.config file with 

    <httpHandlers>
       <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>

      

[Sandhia]

Sorry Rumen -- I hit the wrong key before finishing up my email.

So I don't know how to move DiaglogHandler to the root of my application and modify it.

Looking at the exception that is thrown again, it is in DialogHanlder at line 356 --

===================

_ensureDialogIsVisible: function() {
var dialogWindow=this._getRadWindow();
if(!$telerik.isScrolledIntoView(dialogWindow.get_popupElement())) {
dialogWindow.center();
}
},

==========================

and it appears that dialogWindow is null.

Also when I hover over "_ensureDialogVisile", it says that this method is undefined.

It sounds logical to comment this part of code out but I don't seem to have access.

 

Thanks, Raka

[Rumen]

Hi Sandhia,

All you have to do is to copy/paste the EditorDialogs folder from the Telerik ASP.NET AJAX installation in your project and to set the ExternalDialogsPath property to point to it. After that open the EditorDialogs/FindAndReplace.ascx file and comment the contents of the _ensureDialogIsVisible function as shown in my earlier reply.

By the way, I already attached the modified FindAndReplace.ascx file in my earlier reply so you can just create a folder named EditorDialogs in the root of the app and put this file there. After that set ExternalDialogsPath="~/EditorDialogs", e.g.

        <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server" ExternalDialogsPath="~/EditorDialogs">
            <content>some text</content>
        </telerik:RadEditor>

This way RadEditor will use the external customized FileAndReplace dialog file instead of the built-in one.

 

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

You are right - sorry for being dense.

So once I copy it in my root directory, the error disappears.

There is another two issues though --

1) Sometimes it doesn't find a string that is there.  I copy the string and paste it in 'Find' - that works.  However if I am using 'Find-and-Replace', it tells me that 'search string not found'!  This issue is intermittent.

2) Once the Find-and-Replace works, the Find-and-Replace window gets hidden, i.e., the user can't see it but it is there along with '2 strings were changed' popup.  So if the user does 5 Find-and-Replace then there will be 5 Find-and-Replace popups will be hanging around.  Is there a way to keep the first Find-and-Replace popup visible so that user has to close it once they are done?

 

Thanks

Sandhia

[Sandhia]

More info -- It looks to me that there is something that is different in what execFind does after it executes than what execReplace does.  

After execFind, the find-and-replace windows stays up but as soon as execReplace executes, it gets hidden and you have to click on it to bring it up.  I am running this in Chrome, by the way.

Can something be done with the use of z-index?

 

Thanks, Sandhia

[Rumen]

Hi Sandhia,

This thread becomes very long. At the same time, I am unable to reproduce the reported problems.

Can you please open a support ticket and provide a simple runnable project which demonstrates the problems? I will also need reliable reproduction steps plus sample content to perform an accurate test.

Please also specify whether these issues started to happen after setting the 

                editor.set_useClassicDialogs(true);

 

or happen even when using the RadWindow based dialogs of RadEditor (editor.set_useClassicDialogs(false);)?

The issue may be also specific to your project, you should start to exclude portions from it CSS, JavaScript and components to pinpoint the reason for it.

Last but not least make sure you perform the test with the latest version 2020.2.617.

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

 

To answer your question prior to start using 

editor.set_useClassicDialogs(true), 

I was not even open the popup for find-and-replace outside the parent window.  Now with this setting as 'true', find-and-replace opens outside the parent window which is what we want.  There are just these other issues (mainly that the popup goes in background as soon as one does a 'find-and-replace'.  This does not happen and works correctly when only 'find' is clicked.  

Thank you very much for your patience and support.
Sandhia

[Rumen]

Hi Sandhia,

What you can do is to get reference to the Find and Replace window and to focus it:

		_ensureDialogIsVisible: function () {
			setTimeout(function () {
				//debugger
				window.focus();
                        }, 500);
		},

Test by increasing, decreasing, and removing the timeout. 

If this still does not solve the issue, enable the debugger and experiment - you can put an alert() to see whether it is called. This is the function responsible for the dialog visibility. 

Regards,
Rumen
Progress Telerik

[Sandhia]

Hello Rumen

So finally got it working...

I had to modify following --

_showFindReplaceResult: function(result) {
if (result) {
if (typeof (result) === "string") {
this._showMessageBox(localization[result]);
}
else if (result.replaceCount) {
this._showMessageBox(String.format(localization[result.message], result.replaceCount));
}
}
else
window.focus();   <-------  needed to keep focus when 'replace' is used
},

 

 

 

AND

_showMessageBox: function(msg) {
                window.focus();    <----------------------works for replace-all
window.alert(msg);
},

 

 

Thank you very much.

Sandhia