This is a migrated thread and some comments may be shown as answers.

RadEditor loaded through ajax

2 Answers 70 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Anooshiravan
Top achievements
Rank 1
Anooshiravan asked on 06 Mar 2018, 01:25 PM

When I add a RadEditor to the page through an ajax call(get) it appears on the page but doesn't work properly.

01.$.ajax({
02.                        type: "GET",
03.                        url: "/Showmodule.aspx",
04.                        data: { Mid: "MyList", path: "" },
05.                        cache: false,
06.                        success: function (data) {
07.                            CheckLoginStatus(data);
08.                            $('.contentModule').empty().append(data);
09.                        }
10. 
11. });

 

For example I can't resize it or it event can't get focus to edit anything.

Do you have any suggestions on the problem?

thanks in advance.


2 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 06 Mar 2018, 01:49 PM
Hello,

RadEditor is a server ASP.NET component and it cannot be created on the client side.

Progress Telerik UI for ASP.NET AJAX are script controls, which means that they rely on the MS AJAX framework (both server and client-side) to work as expected. They use the ScriptManager control to output the needed resources to the page and then MS AJAX generates a $create() statement for them to transfer needed properties from the server to the client and to instantiate the client-side object of the control (the one you would usually reference by using the $find() method which is a shortcut to the findComponent() method). When this object is initialized a lot of the functionality, event handlers and settings are created for the control which enable its behavior in the browser.

Now, when only the HTML is taken by rendering the control on the server the framework is not notified about this control, so its $create() statement and the client-side object are not initialized. This means that the control simply cannot function in this case, it is a "dead" collection of HTML and styles that has no rich behavior like you would have in a normal page(scenario).

Put simply, the HTML alone is not enough for the control to function, so it cannot be loaded like this on the page. You can consider adding it in a partial postback on the concrete page, however. You could encapsulate the functionality in a user control to make things more reusable.

Another approach is to replace RadEditor with Kendo UI Editor, which is a client-side alternative of RadEditor for ASP.NET AJAX. It is entirely created on the client side and it should work properly in your scenario.

Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Anooshiravan
Top achievements
Rank 1
answered on 07 Mar 2018, 11:28 AM

thanks... I checked the code generated for my page and found:

//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadWindow,
.
.
.
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadDialogOpener,
.
.
.
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadEditor,
.
.
.

so I tried copying the contents of the three functions and calling them in my code manually after append() and the radEditor started working.

but it is so strange that the code does indeed exist but is not automatically called.

Tags
General Discussions
Asked by
Anooshiravan
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Anooshiravan
Top achievements
Rank 1
Share this question
or