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

Problem rendering RadEditor first time it loads

8 Answers 224 Views
Editor
This is a migrated thread and some comments may be shown as answers.
USI
Top achievements
Rank 1
USI asked on 14 Nov 2011, 01:33 PM
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

8 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 14 Nov 2011, 02:59 PM
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
0
USI
Top achievements
Rank 1
answered on 14 Nov 2011, 03:24 PM
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
0
USI
Top achievements
Rank 1
answered on 15 Nov 2011, 12:06 PM
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
0
Rumen
Telerik team
answered on 15 Nov 2011, 01:06 PM
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
0
USI
Top achievements
Rank 1
answered on 15 Nov 2011, 01:12 PM
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?
0
Rumen
Telerik team
answered on 15 Nov 2011, 01:33 PM
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
0
USI
Top achievements
Rank 1
answered on 22 Nov 2011, 11:27 AM
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
0
Rumen
Telerik team
answered on 24 Nov 2011, 04:11 PM
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
Tags
Editor
Asked by
USI
Top achievements
Rank 1
Answers by
Rumen
Telerik team
USI
Top achievements
Rank 1
Share this question
or