RadEditor toolbars not working when use RadWindow as the container

28 posts, 0 answers
  1. Sittha Apasirikul
    Sittha Apasirikul avatar
    5 posts
    Member since:
    Jul 2009

    Posted 08 Dec 2009 Link to this post

    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" />
               &nbsp;
                <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.

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 08 Dec 2009 Link to this post

    Hello Sittha,

     Thank you for bringing this problem to our attention - I logged it in our database and we will do our best to have it fixed as soon as possible. I have also updated your points.


    Regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 09 Dec 2009 Link to this post

    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.
  5. Sittha Apasirikul
    Sittha Apasirikul avatar
    5 posts
    Member since:
    Jul 2009

    Posted 10 Dec 2009 Link to this post

    Thanks for the solution, RadEditor is working now.
    But I found that an ImageButton in the ContentTemplate of RadWindow always perform a full postback when onclick event occur.
    Is it possible to make a partial postback when I click a button in a RadWindow ?
  6. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 14 Dec 2009 Link to this post

    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.
  7. Patrick Rills
    Patrick Rills avatar
    5 posts
    Member since:
    Jan 2010

    Posted 04 Feb 2010 Link to this post

    Is there a solution for this problem yet because the workaround doesn't work for me.  I'm dynamically adding a RadEditor to a usercontrol that is then added to a RadWindow.  The sizing of the radeditor is all wrong and none of the toolbar buttons work.

    If I add the radeditor to the page dynamically, it works fine.  However, when it is added to a radwindow, it doesn't.

    Thanks,

    Patrick
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Feb 2010 Link to this post

    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.
  9. Patrick Rills
    Patrick Rills avatar
    5 posts
    Member since:
    Jan 2010

    Posted 05 Feb 2010 Link to this post

    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
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Feb 2010 Link to this post

    Hi Patrick,

    I am not sure what exactly cause the problem you report and thus I believe that the best way to proceed is to prepare a sample, fully runnable reproduction demo, open a new support ticket and send it to use along with very detailed explanations and reproduction steps. Once we receive this we will debug it locally and  we will do our best to help.


    Greetings,
    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.
  11. Pawel
    Pawel avatar
    8 posts
    Member since:
    Sep 2009

    Posted 15 Feb 2010 Link to this post

    Hi,
    The provided workaround does not seem to work in Opera (10.10). Any ideas how to modify it to make it work ?

    regards
    Pawel
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Feb 2010 Link to this post

    Hi Pawel,

    We are aware of this problem under Opera but unfortunately we cannot provide a workaround for the time being. However, we are currently working on finding such and once I have some more useful information abut this I will follow you up in this thread.

    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.
  13. Kris Ivanov
    Kris Ivanov avatar
    4 posts
    Member since:
    Apr 2010

    Posted 07 Jul 2010 Link to this post

    Do we have a solution for the problem? We are about to hit Q2.2010 release, hopefully this has been addressed.

    Thanks,
    Kris
  14. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Jul 2010 Link to this post

    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
  15. Rachana
    Rachana avatar
    18 posts
    Member since:
    Jul 2011

    Posted 19 Jul 2011 Link to this post

    I am trying to increase toolbar height and width of radeditor........but am not able to slove it.......
    can any help to solve this issue...
  16. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 19 Jul 2011 Link to this post

    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
    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
  17. Rachana
    Rachana avatar
    18 posts
    Member since:
    Jul 2011

    Posted 19 Jul 2011 Link to this post

    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




  18. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Jul 2011 Link to this post

    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!

  19. Rachana
    Rachana avatar
    18 posts
    Member since:
    Jul 2011

    Posted 21 Jul 2011 Link to this post

    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
  20. Rachana
    Rachana avatar
    18 posts
    Member since:
    Jul 2011

    Posted 21 Jul 2011 Link to this post

    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
  21. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 21 Jul 2011 Link to this post

    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

    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!

  22. Mehmet Şerif
    Mehmet Şerif avatar
    12 posts
    Member since:
    Nov 2011

    Posted 11 Nov 2011 Link to this post

    Hi,

    I'm also using a radeditor in my web project. When i work on development environment there is no problem. But when i deploy the website to the live environment rad editor's style selectors and paragraph stylers don't work, paragraph comboboxes don't open. Bold, Italic attribute buttons don't make the text bold or italic. Web Server is IIS 7.5, and i couldn't find any solution on the net. How can i solve this problem?

    Thanks
  23. Mehmet Şerif
    Mehmet Şerif avatar
    12 posts
    Member since:
    Nov 2011

    Posted 11 Nov 2011 Link to this post

    Hi,

    I'm also using a radeditor in my web project. When i work on development environment there is no problem. But when i deploy the website to the live environment rad editor's style selectors and paragraph stylers don't work, paragraph comboboxes don't open. Bold, Italic attribute buttons don't make the text bold or italic. Web Server is IIS 7.5, and i couldn't find any solution on the net. How can i solve this problem?

    Thanks
  24. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Nov 2011 Link to this post

    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
  25. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 26 Jul 2012 Link to this post

    Hello,

    Have you resolve this problem since 2009 ?

    the workaround work but i would like to have a good library without bug.

    if you don't add the workaround , there are a <br/> in the radeditor , i don't know why,
    it's by default in a radwindow.

    thanks..
    olivier,
  26. tony
    tony avatar
    5 posts
    Member since:
    Jul 2011

    Posted 26 Jul 2012 Link to this post

    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
  27. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 26 Jul 2012 Link to this post

    Hello all,

    We have again a problem, when we save in the database from the radeditor.

    We have 3 <br/> on the bottom , and each save , this reproduce this.

    have you an solution please ?
  28. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 31 Jul 2012 Link to this post

    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
    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.
  29. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017