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 Answers, 1 is accepted
0
Accepted
Hello PJ Melies,
You can use the following approach to get the RadEditor to display as expected:
Greetings,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
You can use the following approach to get the RadEditor to display as expected:
- Define a DIV element with "display:none" as a direct parent of the RadEditor.
- When the RadDock expands, set the display CSS property of that DIV element to "".
| <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.
0
Yeroon
Top achievements
Rank 2
Rank 2
answered on 08 Nov 2011, 11:46 AM
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.
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.