RadEditor loaded through ajax

3 posts, 1 answers
  1. Anooshiravan
    Anooshiravan avatar
    10 posts
    Member since:
    Feb 2018

    Posted 06 Mar Link to this post

    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. Answer
    Rumen
    Admin
    Rumen avatar
    13394 posts

    Posted 06 Mar Link to this post

    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.
  3. Anooshiravan
    Anooshiravan avatar
    10 posts
    Member since:
    Feb 2018

    Posted 07 Mar in reply to Rumen Link to this post

    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.

Back to Top