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

RadEditor toolbars not working when use RadWindow as the container

27 Answers 544 Views

Window

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

Sittha Apasirikul asked on 08 Dec 2009, 06:32 AM

I use RadControls Q3 2009 which RadWindow have a new feature "Use as controls container".
I put RadEditor in RadWindow's ControlTemplate and found that all RadEditor toolbars not working anymore.
But I can type in it and chage to others mode (Design, Html).

This is the example code.

-----

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindow ID="radWindow" runat="server" Title="Edit Text" VisibleOnPageLoad="true" Width="800px" Height="700px"
     Modal="true" >
    <ContentTemplate>
        <center>
            <br />
            <asp:Label ID="lblTextEditorHead1" runat="server" Font-Bold="True" Font-Size="Large">Edit Text</asp:Label>
                <br />
                <br />
                <telerik:RadEditor ID="radEditor" Runat="server" Height="350px" Width="656px"
                    EnableViewState="True">
                    <Content></Content>
                </telerik:RadEditor>
            <br />
            <br />
            <asp:ImageButton ID="btnTextEditorOk" runat="server" ImageUrl="~/images/btn_ok.png" CausesValidation="false" />
            
            <asp:ImageButton ID="btnTextEditorCancel" runat="server" ImageUrl="~/images/btn_cancel.png" CausesValidation="false" />
            <br />
            <br />
            </center>
    </ContentTemplate>
    </telerik:RadWindow>
    </form>
</body>
</html>
-----

I want to make RadEditor modal popup in the same page so I try to use this new feature.
Is there any solution to correct this? If not then I will try RadToolTip instead.

27 Answers, 1 is accepted

answered on 09 Dec 2009, 02:26 PM

Hello again Sittha,

I just wanted to inform you that we found a workaround for the problem. We will continue with the investigation and will try to find the best way to implement the fix in the code, but for now you can use the code below - note the DIV that wraps the editor and the JavaScript code hooked to the OnClientShow event handler of the RadWindow control:

<form id="form1" runat="server">

<asp:ScriptManager ID="Sc1" runat="server">

</asp:ScriptManager>

<telerik:RadWindow ID="RadWindow1" Width="740" Height="500" OnClientShow="OnClientShow"

runat="server" VisibleOnPageLoad="true">

<ContentTemplate>

<div id="editorWrapper" style="padding: 5px; display: none;">

<telerik:RadEditor ID="RadEditor1" runat="server">

</telerik:RadEditor>

</div>

</ContentTemplate>

</telerik:RadWindow>

<script type="text/javascript">

function OnClientShow(sender, args)

{

// Fix the size problem in IE.

var editorParent = $get('editorWrapper');

editorParent.style.display = '';

// Fixes the problem with the content area in FF and Safari

var editor = $find('<%= RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');

editor.onParentNodeChanged();

var style = editor.get_contentArea().style;

style.backgroundImage = "none";

style.backgroundColor = "white";

}

</script>

</form>

Greetings,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 14 Dec 2009, 11:14 AM

radwindowcontent.zip

Hi Sittha,

This could happen if you are using RadAjaxManager along with RadWindow inside RadWindowManager - this is a known limitation that will be fixed for Q1. We have added information about this issue in our documentation and demos:

To use the RadAjaxManager control in integration with a RadWindow as demonstrated in this demo you should use a separate RadWindow control and not to wrap it in a RadWindowManager. As to using with the standard MS AJAX, it should be used as all other INamingContainers

If you are using standalone RadWindow, you should not experience this problem though. For convenience I attached a small sample to this thread that shows this setup.

Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 05 Feb 2010, 01:52 PM

Hello Patrick Rills,

The problem comes from the fact that the RadEditor has an invisible parent and it becomes visible afterwards and the only way to solve the issue is to use the provided workaround. Would you please let us know why it does not work for you? I believe that it could be adjusted to your setup and if I have more details about the problem with the workaround, I will provide you with some useful directions.

Regards,
Svetlina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

answered on 05 Feb 2010, 03:06 PM

radeditorwindowproblem1.JPG

radeditorwindowproblem2.JPG

Here's my scenario:

I have a page that displays a modal radwindow. The radwindow is invisible (VisibleOnLoad = False) until a user clicks an edit button. When they click the edit button the radwindow is shown (VisibleOnLoad = True) and a certain custom user control is loaded into the radwindow's ContentContainer based on some conditions. All of this is done using a RadAjaxManager. Some of these custom user controls have RadEditors and some don't. I check to see if the control has a RadEditor and if it does, I inject this javascript using the RadAjaxManager:

                    _ram.ResponseScripts.Add("var editorParent = $get('" & radedit.ClientID & "'); editorParent.style.display = ''; var editor = $find('" & editbox.ClientID & "'); editor.onParentNodeChanged(); var style = editor.get_contentArea().style; style.backgroundImage = ""none""; style.backgroundColor = ""white"";")         

Setting EnableEmbeddedScripts = True on the radwindow and using a container with the display=none (then using the javascript to show it) seems to have fixed the issue with not being able to click the toolbar buttons.

However, as you can see from the screenshots I attached, I am still having issues with size. The first screenshot shows what it looks like when it first loads. Those orange buttons should be below the radeditor. The problem is that an inline style setting the radeditor to 640x480 is injected somewhere (even though the editor is taller than that). If you click one of the three buttons at the bottom (Design, HTML, or Preview), you get screen shot 2 where is resizes some but its still not right.

Also, when I deploy this code to the server, I get a javascript error (null reference) on the code I pasted above (the fix) saying that it can't find the radeditor even though it works from Visual Studio.

Let me know if you want to see any other parts of the code.

Thanks,

Patrick

answered on 09 Jul 2010, 02:31 PM

Hello Kris,

This issue is still not resolved because of the complexity of the scenario and the browser specifics of Opera. However, the workaround works without problems in all other browsers and fixing this problem is in our TODO list.

If having an editor in RadWindow under Opera working as expected, what I can suggest is to put the editor in a separate page and set the NavigateUrl property to it instead of using ContentTemplate. In this manner the setup will work under all browsers including Opera.

Kind regards,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 19 Jul 2011, 11:55 AM

Hi,

The default toolbar mode of RadEditor (ToolbarMode="Default") corresponds to the specified Width of the editor control. If you want to increase the toolbar width you should also increase the Width of RadEditor. The height is automatically controlled by inner toolbars. If there is not enough place on a horizontal line for two inner toolbars the second one will go on the next line.

If you set ToolbarMode=ShowOnFocus then you will be able to control the toolbar width through the ToolsWidth property of RadEditor.

Kind regards,
Rumen
the Telerik team

answered on 19 Jul 2011, 12:14 PM

radeditor.jpg

If i will do like that it doesn't show the toolbar...
I want change the height of the toolbar..
Bcoz my image size is 38*37 pixels that image i have feet in that toolbar..
please look at below attachment for clarification..
please do the needfull for this

answered on 20 Jul 2011, 02:31 PM

Hi Swetha,

The RadEditor uses icons with 16x16 pixels size which is set to the containers of the icons, while the icons themselves are set as background images. This means that if you put a larger image there it will not resize the toolbar, but simply crop or spill out (depending on your custom CSS), but it will not resize its container. If you wish to use larger images you would have to rework a lot of the RadEditor's CSS and create a custom skin.

If you wish to change the height of the toolbar container you could use a CSS rule, but please note that this is not a valid method of changing the toolbar height, as it is calculated dynamically depending on the available buttons and this could break some other functionality:

.reToolCell

{

height: 120px !important;

}

Regards,
Marin
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

answered on 21 Jul 2011, 05:33 AM

radeditor.gif

Hi Marin,

Thanks a lot ...Bcoz of this css we can change the height of the toolbar...
Its working Fine....But toolstrip Tab Also I have to Resize........
How to resize the toolstrip Tab?
here am attaching the file..
Please look at that...
Do the need full..Its very urgent

Thanks
Swetha

answered on 21 Jul 2011, 07:23 AM

editor.png

Hi Marin,

Thanks a lot ...Bcoz of this css we can change the height of the toolbar...Its working Fine....But toolstrip Tab Also I have to Resize........
How to resize the toolstrip Tab?For that CSS we have write somthing like..

.reGrip.grip_first,.reGrip.grip_last{

height:45px !important;

width: 50px !important;

}
but in middle of the tool strip remains the same,The images also overlapping one of the other

Can u tell me How to resolve it..here am attaching the file..Please look at that...
Do the need full please..Its very urgent

Thanks
Swetha

answered on 21 Jul 2011, 01:12 PM

Hi Swetha,

As I explained in my previous post - the RadEditor does not support different height for the tools images. If you wish to modify this you would need to create a custom skin. I believe you will find the following articles useful on the matter:
http://www.telerik.com/help/aspnet-ajax/editor-css-classes-and-their-use.html
http://www.telerik.com/help/aspnet-ajax/editor-css-classes.html

Also using a tool like FireBug or the IE Dev toolbar can help you easily examine the elements that you would need to change.

Please note that we do not support custom solutions and creating a custom skin is entirely up to the developer.

It is also important to state that changing such fundamental properties of the RadEditor is likely to break its whole desing, since many sprites, CSS and HTML are involved in creating the toolbar.

The bottomline is that I would advise you to rework the images to be 16 by 16 pixels as the default ones, or use external image buttons to trigger these actions. You may find this online demo useful if you choose to do so.

Kind regards,
Marin
the Telerik team

answered on 14 Nov 2011, 12:28 PM

Hello Mehmet,

It seems that you do not have the scripts and CSS files loaded. This can happen if you do not have the proper handlers in your web.config. You are using IIS 7.5 which needs the handlers registered in the webServer section. For more information please examine the following help article: http://www.telerik.com/help/aspnet-ajax/introduction-registering-the-httphandlers-on-windows-vista-iis-7-integrated-mode.html. You can alternatively use the Editor's SmartTag to add these handlers or copy them from the web.config that is created by the RadControsl WebSite template in VisualStudio.

Regards,
Marin
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

answered on 26 Jul 2012, 08:20 AM

Hello Olivier

i found the way to remove a <br> in the rad editor.

With the workaround, we find finally two : <br/> <br/>

The solution is to add this : editor.set_html('');

<script type="text/javascript">
    function OnClientShow(sender, args) {
        // Fix the size problem in IE.
        var editorParent = $get('editorWrapper');
        editorParent.style.display = '';
        // Fixes the problem with the content area in FF and Safari
        var editor = $find('<%= RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');
        editor.onParentNodeChanged();
        var style = editor.get_contentArea().style;
        editor.set_html(''); // the new code
        style.backgroundImage = "none";
        style.backgroundColor = "white";
    }
</script>

thanks
Tony

answered on 31 Jul 2012, 06:32 AM

Hi,

Could you please post your RadEditor specific questions in the RadEditor forums?

As to the reported behavior: I am not aware of it and you are the first to report it. Are you able to reproduce it in one of the following live demos:

If yes, please, record your steps in screenshots / video and send it for examination. Once we are able to replicate the problem we will be able to debug and fix it.

The live demos always runs the latest official build of our controls and if the problem is not reproducible, this means that it is most likely fixed and you will need to upgrade to the latest official build of RadControls for ASP.NET AJAX.

All the best,
Rumen
the Telerik team