Solved

Telerik Radeditor turns to blue screen in safari and Chrome

Posted on 2011-09-27
10
950 Views
Last Modified: 2012-05-12
Hi,

I have an issue with RadEditor control while operating it in Safari and Chrome.

Initially the Editor loads fine. See the attachment  

"radeditor_BeforeServerButtonClick.JPG".
But if I click on some server controls, it turns the radeditor in to a blue

screen. See that attachment "radeditor_AfterServerButtonClick.JPG".

The following is the html part of the radeditor.

Request you to please resolve this issue.
<radE:RadEditor ID="edr_PaymentNoteDtls" Skin="Office2007" ShowHtmlMode="false" ShowPreviewMode="false" CssClass="NormalHeading" SubmitCancelButtons="false"  runat="server" Width="940px" Height="450px" ToolsFile="~/RadControls/Editor/ToolsFile.xml" StripFormattingOnPaste="MSWordNoFonts" NewLineBr="False" ImagesPaths="~/DocumentImages" UploadImagesPaths="~/DocumentImages" DeleteImagesPaths="~/DocumentImages"> </radE:RadEditor>

Open in new window

    InitialScreenradeditor-AfterServerButtonClick.JPG
0
Comment
Question by:j1981
  • 6
  • 4
10 Comments
 
LVL 14

Expert Comment

by:binaryevo
ID: 36717131
You may have to override the css class with one of your own and use the !Important attribute to ensure that your class has precedence.  I know I have run into similar issues with the rad grid.
0
 

Author Comment

by:j1981
ID: 36812976
Thank you binaryevo... Can you please put little more details ..
0
 
LVL 14

Expert Comment

by:binaryevo
ID: 36907245
Here is an example of one i created that works flawlessly.
 <script type="text/javascript">
        function OnClientPasteHtml(sender, args) {
            var commandName = args.get_commandName();
            var value = args.get_value();

            if (commandName == "InsertDate" || commandName == "InsertTime") {
                //Set the inserted date / time string in a DIV with formatting
                var div = document.createElement("DIV");

                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);

                //Set date/time information in a DIV element with applied color and background formatting 
                args.set_value("<div style='margin: 1px; padding:2px; width:auto; display:inline;border:solid 2px black; color:black; background-color:#FFCC00;'>" + div.innerHTML + "</div>");
            }

            if (commandName == "ImageManager") {
                //See if an img has an alt tag set 
                var div = document.createElement("DIV");

                //Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
                //This is a severe IE quirk.
                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);

                //Now check if there is alt attribute 
                var img = div.firstChild;
                if (!img.alt) {
                    var alt = prompt("No alt tag specified. Please specify an alt attribute for the image", "");
                    img.setAttribute("alt", alt);

                    //Set new content to be pasted into the editor 
                    args.set_value(div.innerHTML);
                }
            }

            if (commandName == "DocumentManager") {
                //Set target="_blank" to the links inserted through the Document manager
                var div = document.createElement("DIV");

                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
                //Now check if there is target attribute
                var link = div.firstChild;
                if (!link.target) {
                    alert("No target attribute specified. The editor will automatically set target='blank' to the link");
                    link.setAttribute("target", "_blank");

                    //Set new content to be pasted into the editor 
                    args.set_value(div.innerHTML);
                }
            }

            if (commandName == "InsertTable") {
                //Set border to the inserted table elements
                var div = document.createElement("DIV");

                //Remove extra spaces from begining and end of the tag
                value = value.trim();

                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
                var table = div.firstChild;

                if (!table.style.border) {
                    table.style.border = "dashed 1px red";
                    //Set new content to be pasted into the editor 
                    args.set_value(div.innerHTML);
                }
            }

            //Cancel the event if you want to prevent pasteHtml to execute 
            /*
            args.set_cancel(true);
            */
        }
        
    </script><h1>Template Edit</h1>
      <br />
    
    <table width="80%" align="center">
        <tr>
            <td>Name</td>
            <td>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>Description</td>
            <td>
                <asp:TextBox ID="txtDescription" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:CheckBoxList ID="clTypes" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="CA"></asp:ListItem>
                    <asp:ListItem Text="Contract"></asp:ListItem>
                    <asp:ListItem Text="Proposal"></asp:ListItem>
                    <asp:ListItem Text="Working Copy"></asp:ListItem>
                </asp:CheckBoxList>
            </td>
        </tr>
    </table>
    <telerik:RadEditor runat="server" ID="rdEditor" Skin="WebBlue" Height="800px" Width="100%" OnClientPasteHtml="OnClientPasteHtml"></telerik:RadEditor>
    <table>
        <tr>
            <td colspan="2" align="right">
                <br /><br />
                <asp:Button ID="btnSave" runat="server" Text="Save" Width="100px" OnClick="btnSave_Click" />&nbsp&nbsp&nbsp
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="100px" OnClick="btnCancel_Click" />
            </td>
        </tr>
    </table>

Open in new window

0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:j1981
ID: 36942066
Thank you so much.. Let me test with this.

The issue was when using rad editor inside an update panel. When I put that outside the update panel the issue was resolved.
0
 
LVL 14

Expert Comment

by:binaryevo
ID: 36949093
Did you try using teleriks version of the update panel instead?
0
 

Author Comment

by:j1981
ID: 37055975
I am sorry. I could not use that as I am new to the telerik stuffs
0
 

Author Comment

by:j1981
ID: 37082289
I've requested that this question be closed as follows:

Accepted answer: 0 points for j1981's comment http:/Q_27343250.html#36942066

for the following reason:

The issue was with the updated pannel. I could not get the real solution for this
0
 
LVL 14

Accepted Solution

by:
binaryevo earned 500 total points
ID: 37082290
Im sorry but, I do not agree that this should be not awarded any points.  My last comment was to use telerik's own ajaxupdatepanels which would resolve the issue as telerik controls like to utilize their own control extensions.  
0
 

Author Closing Comment

by:j1981
ID: 37099877
Sorry. I am giving you full points.
0
 

Author Comment

by:j1981
ID: 37099888
binaryevo may be correct even I could not apply his solution in fully.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question