Problem with editor when inside a collapsed Dock

3 posts, 1 answers
  1. PJ Melies
    PJ Melies avatar
    30 posts
    Member since:
    Sep 2008

    Posted 01 Apr 2009 Link to this post

    When a RadEditor is inside a RadDock that is collapsed by default the editor control isn't drawn correctly when the dock is expanded.  We setup the editor to display in a very basic fashion (no toolbars, displaying statistics and spell check).  It appears that the code that runs to size the various parts of the control doesn't execute if the containing dock is collapsed by default and expanding the dock after that doesn't trigger a redraw.  Is there a fix or workaround I can implement to correct the behavior?

    See the code below (Default.aspx and the ToolFile referenced by the Editor).  There is nothing in the code-behind.

    <%@ 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>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="900px">  
                    <telerik:RadDock ID="RadDock1" runat="server" Width="900px" Height="300px" DockMode="Docked" DefaultCommands="ExpandCollapse" Title="Collapsed" 
                        Collapsed="true">  
                        <ContentTemplate> 
                            <telerik:RadEditor ID="RadEditor1" runat="server" 
                                AutoResizeHeight="true" Height="55px" Width="800px"   
                                EnableResize="false" ToolbarMode="Default" EditModes="Design" 
                                ToolsFile="ToolFile.xml">  
                                <Modules> 
                                    <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" /> 
                                </Modules>                              
                            </telerik:RadEditor> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                    <telerik:RadDock ID="RadDock2" runat="server" Width="900px" Height="300px" DockMode="Docked" DefaultCommands="ExpandCollapse" Title="Expanded">  
                        <ContentTemplate> 
                            <telerik:RadEditor ID="RadEditor2" runat="server" 
                                AutoResizeHeight="true" Height="55px" Width="800px" 
                                EnableResize="false" ToolbarMode="Default" EditModes="Design" 
                                ToolsFile="ToolFile.xml">  
                                <Modules> 
                                    <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" /> 
                                </Modules> 
                            </telerik:RadEditor> 
                        </ContentTemplate> 
                    </telerik:RadDock>                  
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 

     

    <root> 
        <tools name="SpellCheck" enabled="true" DockingZone="Right">  
            <tool name="AjaxSpellCheck" /> 
        </tools> 
    </root> 

     

  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Apr 2009 Link to this post

    Hello PJ Melies,
    You can use the following approach to get the RadEditor to display as expected:
    1. Define a DIV element with "display:none" as a direct parent of the RadEditor.
    2. When the RadDock expands, set the display CSS property of that DIV element to "".
    For example:
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
        <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="900px"
            <telerik:RadDock ID="RadDock1" runat="server" Width="900px" Height="300px" DockMode="Docked" 
                DefaultCommands="ExpandCollapse" Title="Collapsed" Collapsed="true" OnClientCommand="OnClientCommand"
                <ContentTemplate> 
                    <div id="editorWrapper" style="display: none;"
                        <telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="true" Height="55px" 
                            Width="800px" EnableResize="false" ToolbarMode="Default" EditModes="Design" ToolsFile="ToolFile.xml"
                            <Modules> 
                                <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" /> 
                            </Modules> 
                        </telerik:RadEditor> 
                    </div> 
                </ContentTemplate> 
            </telerik:RadDock> 
            <telerik:RadDock ID="RadDock2" runat="server" Width="900px" Height="300px" DockMode="Docked" 
                DefaultCommands="ExpandCollapse" Title="Expanded"
                <ContentTemplate> 
                    <telerik:RadEditor ID="RadEditor2" runat="server" AutoResizeHeight="true" Height="55px" 
                        Width="800px" EnableResize="false" ToolbarMode="Default" EditModes="Design" ToolsFile="ToolFile.xml"
                        <Modules> 
                            <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" /> 
                        </Modules> 
                    </telerik:RadEditor> 
                </ContentTemplate> 
            </telerik:RadDock> 
        </telerik:RadDockZone> 
    </telerik:RadDockLayout> 
     
    <script type="text/javascript">    
    function OnClientCommand(sender, args)    
    {                
        if(args.command.get_name() == "ExpandCollapse" && !sender.get_collapsed()); 
        { 
            // Fix the size problem for invisible editor inside dock 
            var editorParent = $get("editorWrapper");      
            editorParent.style.display = "";                    
        }   
    }  
    </script> 


    Greetings,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 08 Nov 2011 Link to this post

    FYI

    In the 2011 Q2 release this problem sort of still exists. For me the rendering works as expected when expanding the dock. So the Editor looks fine.

    However, I do use a toolbar and all that happens when clicking any of the tools is a scroll up of the browser (my dock is below the scroll hight). For the rest the buttons do nothing. The above mentioned workaround works for this scenario too.
Back to Top