I have a RadEditor inside a Raddock. I have an Edit link which will set visible the Radeditor and a close button which will hide the RadEditor. When the RadEditor is hidden we show a div containing the the Html/content saved in the RadEditor.
1. When I drag a RadDock and then release it the Div shows me the html but when I click on Edit link I dont see any html in RadEditor (It just disappear).
I went through one of your forum
http://www.telerik.com/community/forums/aspnet/docking/dynamic-dockable-radeditors.aspx but it doesn't help.
2. Also 'Delete' key and 'Backspace' key is also not working in the RadEditor.( irrespective of draging a Raddock.)
Below is my code: (ScreenNotes.ascx:)
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ScreenNote.ascx.cs" Inherits="UserControl_ScreenNote" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<script type="text/javascript">
var screenNotes = "";
function test(editor)
{
setTimeout(function()
{
editor.add_firstShow(function()
{
editor.fire("FontName", {value : "Arial"});
editor.fire("FontSize", {value : "2"});
var tool = editor.getToolByName("FontSize");
tool.set_value("2");
});
}, 0);
}
function InsertCustomScreenNotes()
{
// declares
var cs = new Live.DataObjects.CustomScreens.CustomScreen();
// disable the add button
//$get("btnAdd").disabled = true;
// obtain the panel name
var notes = $find('<%= NotesRadEditor.ClientID %>').get_html(true);
screenNotes = notes;
cs.ScreenNotes = notes;
// insert the panel
CustomScreens.UpdateCustomScreenNotes(notes, InsertCustomScreenNotesResult);
$get("<%= radEditorDiv.ClientID %>").style.display = "none";
$get("<%= EditLinkRow.ClientID %>").style.display = "";
$get("<%= btnRow.ClientID %>").style.display = "none";
$get("<%= notesDiv.ClientID %>").style.display = "";
//$get("<%= notesDiv.ClientID %>").innerHTML = $find('<%= NotesRadEditor.ClientID %>').get_html();
return false;
}
function InsertCustomScreenNotesResult()
{
document.getElementById("<%= notesDiv.ClientID %>").style.display = "block";
document.getElementById("<%= notesDiv.ClientID %>").innerHTML = $find('<%= NotesRadEditor.ClientID %>').get_html(true);
document.getElementById("<%= radEditorDiv.ClientID %>").style.display = "none";
}
function EditBtnClickScreen()
{
document.getElementById("<%= notesDiv.ClientID %>").style.display = "none";
document.getElementById("<%= radEditorDiv.ClientID %>").style.display = "block";
$get("<%= EditLinkRow.ClientID %>").style.display = "none";
$get("<%= btnRow.ClientID %>").style.display = "";
$find('<%= NotesRadEditor.ClientID %>').set_visible(true);
var notesHTML = document.getElementById("<%= notesDiv.ClientID %>").innerHTML;
$find('<%= NotesRadEditor.ClientID %>').set_html(notesHTML);
return false;
}
function CancelButtonClick()
{
$get("<%= radEditorDiv.ClientID %>").style.display = "none";
$get("<%= EditLinkRow.ClientID %>").style.display = "";
$get("<%= btnRow.ClientID %>").style.display = "none";
$get("<%= notesDiv.ClientID %>").style.display = "";
//$get("<%= notesDiv.ClientID %>").innerHTML = $find('<%= NotesRadEditor.ClientID %>').get_html();
return false;
}
function ShowNoteOnLoad()
{
var chk = $get("<%=chkShowNotesOnLoad.ClientID %>");
CustomScreens.ShowScreenNotesOnLoad(chk.checked);
}
function OnClientDragEnd(dock)
{
var panel = dock._clientStateFieldID;
var top;
var left;
if(panel.toLowerCase().indexOf("screen") > 0 | panel.toLowerCase().indexOf("panel") > 0)
{
top = 161;
left = 794;
}
else
{
top = 164;
left = 64;
}
var restrictionZone = $get('mainTableContainer');
var restrBounds = $telerik.getBounds(restrictionZone);
var dockBounds;
if (dock)
dockBounds = $telerik.getBounds(dock.get_element());
var inBounds;
if (dockBounds)
inBounds= Telerik.Web.UI.ResizeExtender.containsBounds(restrBounds, dockBounds);
if (dock){
if (!inBounds)
{
if (dockBounds.x < restrBounds.x & dockBounds.x > 0)
{
dock.set_left(restrBounds.x);
}
else if (restrBounds.x + restrBounds.width < dockBounds.x + dockBounds.width)
{
dock.set_top(top);
dock.set_left(left);
}
else if (dockBounds.x < 0)
{
dock.set_top(top);
dock.set_left(left);
}
if (dockBounds.y < restrBounds.y & restrBounds.y > 0)
{
dock.set_top(restrBounds.y);
}
else if (restrBounds.y + restrBounds.height < dockBounds.y + dockBounds.height)
{
dock.set_top(top);
dock.set_left(left);
}
else
{
dock.set_top(top);
dock.set_left(left);
}
}
}
}
</script>
<telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Default">
<asp:HiddenField ID="hdnUserGuids" runat="server" />
<telerik:RadDock ID="Report" runat="server" Title="Screen Notes" BorderWidth="0" Width="460" Height="270" Left="0" Top="0" CssClass="DockColor"
DefaultCommands="Close" DockMode="Default" Closed="true" EnableEmbeddedSkins="false" DockHandle="TitleBar" Skin="Default2" Style="z-index:800;" OnClientDragEnd="OnClientDragEnd">
<commands>
<telerik:dockclosecommand />
</commands>
<ContentTemplate>
<%--<ajax:UpdatePanel ID="upandDown" runat="server">
<ContentTemplate>--%>
<div id="divLoadingScreenNotes" style="height:100%; width:100%; margin-left: 0px; margin-top: 0px !important; margin-top: -1px; border: red solid 0px;
z-index: 800; background-color: #ffffff; filter: alpha(opacity=80); -moz-opacity: 0.8;
opacity: 0.8; position: absolute;">
</div>
<table width="450px" height="200px">
<tr id="EditLinkRow" height="15px" valign="bottom" align="center" runat="server">
<td>
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<asp:CheckBox ID="chkShowNotesOnLoad" runat="server" Text="Show Note on Load" Style="float:left; font-size:8pt; color:Black; padding-top:1px;" onclick="javascript:ShowNoteOnLoad();"/>
</td>
<td style="vertical-align:bottom; float:right;">
<asp:LinkButton ID="EditLink" Text="Edit" Style="float:right; font-size:8pt; color:Black; padding-top:6px;" runat="server" OnClientClick="return EditBtnClickScreen();"></asp:LinkButton>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="radEditorDiv" runat="server" style="width:445px; display:none; border:solid 2px #9CB8C3;">
<telerik:RadEditor runat="server" ID="NotesRadEditor" EditModes="Design" Width="442" Height="190" ContentFilters="DefaultFilters" OnClientLoad="test">
<CssFiles>
<telerik:EditorCssFile Value="~/Skins/Custom/Editor.Custom.aspx" />
</CssFiles>
<%-- <Colors>
<telerik:EditorColor Value="white"/>
</Colors>--%>
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Bold" />
<telerik:EditorTool Name="Underline" />
<telerik:EditorTool Name="Italic" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FontName" />
<telerik:EditorTool Name="FontSize" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="ForeColor" />
<telerik:EditorTool Name="BackColor" />
<telerik:EditorTool Name="InsertUnorderedList" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
</div>
<div id="notesDiv" class="notesDivColor" style="height:180px;width:445px; border:solid 2px #9CB8C3; overflow:auto;" runat="server" visible="true" ></div>
</td>
</tr>
<tr id="btnRow" runat="server" style="display:none;">
<td align="right">
<input class="button" id="btnSave" runat="server" name="btnAdd" onclick="InsertCustomScreenNotes();"
type="button" value="Save" />
<input class="button" id="btnCancel" runat="server" name="btnCancel" onclick="CancelButtonClick();"
type="button" value="Cancel" />
</td>
</tr>
<tr></tr>
</table>
<%-- </ContentTemplate>
</ajax:UpdatePanel>--%>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockLayout>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------