Problem rendering RadEditor first time it loads

9 posts, 0 answers
  1. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 14 Nov 2011 Link to this post

    Hi,

    I am using RadEditor inside RadDock. In my application (Sharepoint webparts) the radDocks are dynamically created using an hidden updatepanel. In each raddock I have an UpdatePanel in order to update dynamically its content.

    The first time I open a raddock with an editor inside, the editor is not editable in chrome, internet explorer and firefox. The tools are not rendered  in internet explorer. If I refresh the page with full postback, the editor starts to work correctly in all browsers.

    I tried to place an hidden radeditor  (style="display: none") in my page in order to load javascript files the first time page is rendered but it does not solved my problem.

    Any ideas?



    Michael Pinheiro
  2. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 14 Nov 2011 Link to this post

    Hello Usi,

    Could you please try the solution provided in the following sticky note: Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent?

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 14 Nov 2011 Link to this post

    Hi,
    
    As suggested I tried to place Editor stylesheets manually, unfortunately that not solved my problem. I used the following code:
    
    
    HtmlLink newStyleSheet = new HtmlLink();
    newStyleSheet.Href = Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css");
    newStyleSheet.Attributes.Add("type", "text/css");
    newStyleSheet.Attributes.Add("rel", "stylesheet");
    Page.Header.Controls.Add(newStyleSheet);
     
    newStyleSheet = new HtmlLink();
    newStyleSheet.Href = Page.ClientScript.GetWebResourceUrl(typeof (RadEditor), "Telerik.Web.UI.Skins.Black.Editor.Black.css");
    newStyleSheet.Attributes.Add("type", "text/css");
    newStyleSheet.Attributes.Add("rel", "stylesheet");
    Page.Header.Controls.Add(newStyleSheet);
     
    newStyleSheet = new HtmlLink();
    newStyleSheet.Href = Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css");
    newStyleSheet.Attributes.Add("type", "text/css");
    newStyleSheet.Attributes.Add("rel", "stylesheet");
    Page.Header.Controls.Add(newStyleSheet);
     
    newStyleSheet = new HtmlLink();
    newStyleSheet.Href = Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Black.Window.Black.css");
    newStyleSheet.Attributes.Add("type", "text/css");
    newStyleSheet.Attributes.Add("rel", "stylesheet");
    Page.Header.Controls.Add(newStyleSheet);  
    I tried to put an editor directly on the page (not in raddock) and it works. When the radock is opened via ajax with an editor inside, the editor don't not work but if I refresh the page with full postback, the editor in the radock starts to work. Michael Pinheiro
  4. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 15 Nov 2011 Link to this post

    I think I found the cause of my problem. It seems that binding the onClientCommandExecuted event causes the problem. 

    I use the editor like this:
    <telerik:RadEditor ID="TextContent" runat="server" EditModes="Design"
    Width="100%" AutoResizeHeight="true" OnClientCommandExecuted="handleEditorCommand">
        <Tools>
            <telerik:EditorToolGroup Tag="Tipodeletra">                       
                <telerik:EditorTool Name="Bold" />
                <telerik:EditorTool Name="Italic" />
                <telerik:EditorTool Name="Underline" />
                <telerik:EditorTool Name="StrikeThrough" />                           
            </telerik:EditorToolGroup>
        </Tools>
    </telerik:RadEditor>

    If I remove the OnClientCommandExecuted attribute, the editor works correctly. 

    I need to create custom tools that will trigger ajax requests, how can I bind those events?


    I hope you can help me.

    Michael Pinheiro
  5. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 15 Nov 2011 Link to this post

    Hi Michael,

    Could you please provide the JavaScript code that is causing the problem?
    Does the problem happen with the registration of this simple JS function:

    function handleEditorCommand(editor, args)
    {
       alert("The executed command is " + args.get_commandName());
    }

    Regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 15 Nov 2011 Link to this post

    Yes, the problem occurs with the simple js function you provide.

    Is it possible to bind this event using the client side object of the editor?
  7. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 15 Nov 2011 Link to this post

    It the problem occurs with the basic function than it is most likely due to that the function is either registered before the creation of RadEditor object or it is not registered on the page with RadEditor. You can try to wrap the script code inside RadScriptBlock


    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">   
            function handleEditorCommand(editor, args)   
            {     
                    alert("The executed command is " + args.get_commandName());
            }   
        </script>
    </telerik:RadScriptBlock>


    Yes, you can bind the commandExecuted command to the client-side object of RadEditor using:

    editor.add_commandExecuted(function() { alert(1) });

    If the problem still persists, please isolate it in a sample working project and send it for examination via a support ticket.

    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 22 Nov 2011 Link to this post

    Hi,

    Binding the event in client side solves the problem of editor rendering. Now I have another "problem" each time I made an ajax request, the editor event is binded again. This causes the executedCommand event trigger multiple times.

    Is there any client function on editor client object to check if an event is already binded so I can do something like this:

    if (editor.isEventRegistered("CommandExecuted") == false)
        editor.add_commandExecuted(function() { alert(1) });


    Thanks in advance.

    Michael Pinheiro
  9. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 24 Nov 2011 Link to this post

    Hello Usi,

    You should detach the client event using the editor.remove_commandExecuted(functionName); so that it is not executed multiple time.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top