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

RadEditor (ContentAreaMode='Div') + RadWindow + Firefox

5 Answers 334 Views

Editor

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

José Mª asked on 16 Feb 2011, 10:46 AM

Hello, my problem is that I can't write in the content area of the RadEditor.

The situation is that I've a RadWindow with a RadEditor inside it (ContentAreaMode='Div', custom skin, EditModes 'Design' only) and it works (lets the user write in) in Google Chrome, but not in Firefox (IE not tested). Is there any known reason for this?. An example of what I'm saying is (the page is a content page):

<asp:Content ContentPlaceHolderID="cphContenido" runat="server">

   <table width="100%">
   <thead>
   <tr class="rwContentTitle">
   <th>...</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>
   <fieldset>
   <rad:RadEditor ID="reTextoCampo" runat="server"
   ContentAreaMode="Div"
   EditModes="Design"
   EnableEmbeddedBaseStylesheet="false"
   EnableEmbeddedSkins="false"
   Height="375"
   MaxTextLength="500"
   Skin="XXXX"
   Width="100%">
   <Tools>
   <rad:EditorToolGroup>
   <rad:EditorTool Name="Cut" />
   <rad:EditorTool Name="Copy" />
   <rad:EditorTool Name="Paste" />
   </rad:EditorToolGroup>
   </Tools>
   <Modules>
   <rad:EditorModule Name="RadEditorStatistics" Visible="true" />
   </Modules>
   </rad:RadEditor>

   </fieldset>
....

Thanks in advance.

PD: I forgot to say that the page is the content of the RadWindow :D...

5 Answers, 1 is accepted

answered on 21 Feb 2011, 09:27 AM

Good morning,

First of all, thanks for the reply. Currently I can not provide a functional project because the architecture is built with the Spring.NET engine and a few projects and the size would be truly significant.

However I'll attach a simplified page (eliminating master pages) and the calling code of the RadWindow.

RadWindow (+RadEditor) code:

<%@ Page

Language="C#"

AutoEventWireup="true"

CodeBehind="pagina.aspx.cs"

Inherits="pagina" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %>

<!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">

<%-- Hojas de estilo --%>

<link href="/Css/Ajax.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Calendar.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Combo.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Editor.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Grid.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Html.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Input.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Slider.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/TabStrip.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/ToolTip.Autogrill.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="fDialog" method="post" runat="server">

<%-- Gestor de scripts de ajax; necesario para poder usar cualquier control del toolkit --%>

<rad:RadScriptManager ID="rsmAjax" runat="server"

EnablePageMethods="true"

EnableScriptGlobalization="true"

EnableScriptLocalization="false"

LoadScriptsBeforeUI="true">

<Scripts>

<asp:ScriptReference Path="/Js/JQuery.js" />

<asp:ScriptReference Path="/Js/JQuery.date.js" />

<asp:ScriptReference Path="/Js/JQuery.json.js" />

<asp:ScriptReference Path="/Js/JQuery.easing.js" />

<asp:ScriptReference Path="/Js/JQuery.radWindow.js" />

<asp:ScriptReference Path="/Js/JQuery.extended.js" />

<asp:ScriptReference Path="/Js/JQuery.autogrill.js" />

<asp:ScriptReference Path="/Js/JQuery.helper.js" />

</Scripts>

</rad:RadScriptManager>

<%-- La distribución de la página se realiza mediante una tabla, ancho prefijado --%>

<table width="100%">

<thead>

<tr class="rwContentTitle">

<th>

Titulo Campo:

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<fieldset>

<%-- Se utiliza un control especial con CyP para permitir la introducción de texto --%>

<rad:RadEditor ID="reTextoCampo" runat="server"

EditModes="Design"

EnableAjaxSkinRendering="false"

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false"

Height="375"

MaxTextLength="500"

Skin="Autogrill"

Width="100%">

<Tools>

<rad:EditorToolGroup>

<rad:EditorTool Name="Cut" />

<rad:EditorTool Name="Copy" />

<rad:EditorTool Name="Paste" />

</rad:EditorToolGroup>

</Tools>

<Modules>

<rad:EditorModule Name="RadEditorStatistics" Visible="true" />

</Modules>

</rad:RadEditor>

</fieldset>

</td>

</tr>

</tbody>

<tfoot>

<tr>

<td class="infDer">

<asp:Button ID="bAceptar" runat="server"

CssClass="button normal"

OnClientClick="return OnClientClosing();"

Text="Aceptar" />

</td>

</tr>

</tfoot>

</table>

<rad:RadCodeBlock runat="server">

<script type="text/javascript">

/**********************************************************************************/

/* CARGA DE LA PÁGINA Y RECONSTRUCCIÓN DE LA TABLA */

/**********************************************************************************/

/**

* This function is called when the pop up window is loaded, and regenerates

* the text entered on previous creation/edition moments.

*

* Parameter description:

* No parameters.

*/

function pageLoad()

{

// Trick to solve min-with/min-height 'bug' with the RadEditor

$(".RadEditor.Autogrill.reWrapper").css("min-width", "inherit").css("min-height", "inherit");

// Get a reference to the radWindow wrapper

var oWindow = $(this).getRadWindow();

// Put the (html equivalent) text in the editor

$find("<%= reTextoCampo.ClientID%>").set_html(oWindow.Argument.replace(/\n/g, "<br>"));

}

/**********************************************************************************/

/* CIERRE DE LA PÁGINA Y TRANSMISIÓN DE DATOS A LA PÁGINA PADRE */

/**********************************************************************************/

/**

* This function is called when the client accepts the data entered. It

* retrieves the data written by the user and passes it to the parent window.

*

* Parameter description:

* No parameters.

*/

function OnClientClosing()

{

// Close the RadWindow and sends the argument (plain text) to the parent window

$(this).getRadWindow().close($find("<%= reTextoCampo.ClientID%>").get_html().replace(/<br>/g, "\n"));

// Avoids postback

return false;

}

</script>

</rad:RadCodeBlock>

</form>

</body>

</html>

Calling code (it has been simplified to avoid is too large; see the RadWndow declaration with id "rwProductoEspecificaciones"):

<%@ Page

Title=""

Language="C#"

AutoEventWireup="true"

CodeBehind="gestion.aspx.cs"

Inherits="gestion" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<%-- Hojas de estilo y título de la página --%>

<head runat="server">

<%-- Enlaces a las páginas de estilo aplicadas al sitio web --%>

<link href="/Css/Html.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Ajax.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Calendar.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Combo.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Grid.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Input.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Menu.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Select.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Slider.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Splitter.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/TabStrip.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/ToolTip.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/TreeView.Autogrill.css" rel="stylesheet" type="text/css" />

<link href="/Css/Window.Autogrill.css" rel="stylesheet" type="text/css" />

<%-- Icono favorito corporativo --%>

<link href="/Img/Favicon/Favicon.ico" type="image/x-icon" rel="shortcut icon" />

</head>

<body>

<%-- Formulario principal (y único) de las páginas de la aplicación con esta página maestra --%>

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

<%-- Botón de cierre de sesión --%>

<asp:LinkButton ID="ibLogOut" runat="server"

CssClass="rmLogOut"

OnClick="lbLogOut_Click"

Text="Cerrar sesión" />

<%-- Logo flotante de autogrill: el ancho se determina en la hoja de estilos --%>

<img src="/Img/Menu/logo.png" alt="" class="logo" />

<%-- Menú de navegación horizontal --%>

<rad:RadMenu ID="radMenuPrincipal" runat="server"

CollapseDelay="500"

DataSourceID="smdsAutogrill"

EnableAjaxSkinRendering="false"

EnableEmbeddedScripts="true"

EnableEmbeddedSkins="false"

Flow="Horizontal"

Skin="Autogrill"

Width="100%">

<ExpandAnimation Type="OutQuad" Duration="300" />

<CollapseAnimation Type="InQuad" Duration="200" />

</rad:RadMenu>

<%-- Sepparación entre el menú y el primer componente --%>

<br /><div style="height:29px"></div>

<%-- Gestor de scripts de ajax; necesario para poder usar cualquier control del toolkit --%>

<rad:RadScriptManager ID="rsmAjax" runat="server"

EnablePageMethods="true"

EnableScriptGlobalization="true"

EnableScriptLocalization="false"

LoadScriptsBeforeUI="true">

<Scripts>

<asp:ScriptReference Path="/Js/JQuery.js" />

<asp:ScriptReference Path="/Js/JQuery.json.js" />

<asp:ScriptReference Path="/Js/JQuery.date.js" />

<asp:ScriptReference Path="/Js/JQuery.helper.js" />

<asp:ScriptReference Path="/Js/JQuery.popupWindow.js" />

</Scripts>

</rad:RadScriptManager>

<%-- Panel de filtrado de productos --%>

<div class="frame">

<h1>Gestión de productos</h1>

</div>

<%-- Panel de resultados del filtrado/selección de productos --%>

<div class="frame">

<rad:RadGrid ID="rgResultados" runat="server"

AllowMultiRowEdit="false"

AllowPaging="true"

AllowSorting="true"

AutoGenerateColumns="false"

EnableViewState="true"

EnableAjaxSkinRendering="false"

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedScripts="true"

EnableEmbeddedSkins="false"

EnablePaging="true"

GridLines="None"

ImagesPath="../../Img/Grid/"

OnDeleteCommand="rgResultados_DeleteCommand"

OnInsertCommand="rgResultados_InsertCommand"

OnItemCommand="rgResultados_ItemCommand"

OnNeedDataSource="rgResultados_NeedDataSource"

OnItemDataBound="rgResultados_ItemDataBound"

OnUpdateCommand="rgResultados_UpdateCommand"

PageSize="7"

Skin="Autogrill">

<ClientSettings EnablePostBackOnRowClick="false">

<Selecting AllowRowSelect="true" />

<ClientEvents

OnRowSelected="rgResultados_ClientRowSelected"

OnTableDestroying="rgResultados_ClientTableDestroying" />

</ClientSettings>

<PagerStyle Position="Bottom" Mode="Slider" />

<MasterTableView DataKeyNames="Identificador"

ClientDataKeyNames="PesoNeto, EsNecesarioCaducidad, EsTraza, DiasParaPedido, Codigo, Especificaciones, Conservacion, DiasCaducidad, Notas"

NoMasterRecordsText="No hay datos que mostrar"

AllowMultiColumnSorting="true"

CommandItemDisplay="Top"

EnableNoRecordsTemplate="true">

<Columns>

<%-- Columnas enlazadas a datos a nivel de servidor --%>

<rad:GridTemplateColumn UniqueName="gtcResultadosEditar" HeaderText="Editar"

HeaderStyle-Width="8%"

ItemStyle-Width="8%"

ItemStyle-Wrap="false"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:ImageButton ID="ibResultadosEditar" runat="server"

AlternateText="Editar"

CommandName="Edit"

CssClass="botonComando"

ImageUrl="../../Img/Html/Table/edit.png"

Style="cursor:pointer" />

</ItemTemplate>

</rad:GridTemplateColumn>

<rad:GridBoundColumn DataField="Identificador" UniqueName="gbcResultadosIdentificador" HeaderText="Identificador"

SortExpression="Identificador"

HeaderStyle-Width="8%"

ItemStyle-Width="8%"

ItemStyle-Wrap="false" />

<rad:GridBoundColumn DataField="NombreProveedor" UniqueName="gbcResultadosNombreProveedor" HeaderText="Proveedor"

SortExpression="NombreProveedor"

HeaderStyle-Width="20%"

ItemStyle-Width="20%"

ItemStyle-Wrap="false" />

<rad:GridBoundColumn DataField="NombreArticulo" UniqueName="gbcResultadosNombreArticulo" HeaderText="Artículo"

SortExpression="NombreArticulo"

HeaderStyle-Width="18%"

ItemStyle-Width="18%"

ItemStyle-Wrap="false" />

<rad:GridBoundColumn DataField="Nombre" UniqueName="gbcResultadosNombre" HeaderText="Nombre"

SortExpression="Nombre"

DataFormatString="{0:d}"

HeaderStyle-Width="18%"

ItemStyle-Width="18%"

ItemStyle-Wrap="false" />

<rad:GridBoundColumn DataField="Formato" UniqueName="gbcResultadosFormato" HeaderText="Formato"

SortExpression="Formato"

DataFormatString="{0:d}"

HeaderStyle-Width="10%"

ItemStyle-Width="10%"

ItemStyle-Wrap="false" />

<rad:GridBoundColumn DataField="Envase" UniqueName="gbcResultadosEnvase" HeaderText="Envase"

SortExpression="Envase"

DataFormatString="{0:d}"

HeaderStyle-Width="10%"

ItemStyle-Width="10%"

ItemStyle-Wrap="false" />

<rad:GridTemplateColumn UniqueName="gtcResultadosEliminar" HeaderText="Borrar"

HeaderStyle-Width="8%"

HeaderStyle-Wrap="false"

ItemStyle-Width="8%"

ItemStyle-Wrap="false"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:ImageButton ID="ibResultadosEliminar" runat="server"

AlternateText="Borrar"

CommandName="Delete"

OnClientClick="return confirm('¿Confirma que desea eliminar el producto?');"

CssClass="botonComando"

ImageUrl="../../Img/Html/Table/delete.png"

Style="cursor:pointer" />

</ItemTemplate>

</rad:GridTemplateColumn>

</Columns>

<CommandItemSettings AddNewRecordImageUrl="../../Img/Html/Table/insert.png"

AddNewRecordText="Agregar nuevo Producto"

RefreshImageUrl="../../Img/Html/Table/refresh.png"

RefreshText="Refrescar datos" />

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="tblEditForm" cellspacing="0" cellpadding="0" class="tblModule">

<tr>

<th>Información del Producto:</th>

<th></th>

</tr>

<tr>

<td style="width:50%">

<div class="rgTemplateNineRows">

<table cellspacing="0" cellpadding="0" class="tblSubmodule">

<tr>

<td class="key">

Artículo:

</td>

<td>

<rad:RadComboBox ID="rcbftProductoArticulo" runat="server"

AutoPostBack="false"

CollapseAnimation-Duration="400"

CollapseAnimation-Type="OutQuint"

Enabled='<%# (Container is GridEditFormInsertItem) %>'

EnableEmbeddedScripts="true"

EnableEmbeddedSkins="false"

EnableLoadOnDemand="true"

EnableVirtualScrolling="true"

ExpandAnimation-Duration="450"

ExpandAnimation-Type="OutQuad"

Height="200px"

MarkFirstMatch="true"

OnClientSelectedIndexChanged="rcbftProductoArticulo_SelectedIndexChanged"

ShowMoreResultsBox="true"

ShowToggleImage="true"

ShowWhileLoading="false"

Skin="Autogrill"

WebServiceSettings-Method="FilterArticles"

WebServiceSettings-Path="/Autogrill.Services/ServicioArticuloWebService.asmx" />

<asp:RequiredFieldValidator ID="rfvftProductoArticulo" runat="server"

ControlToValidate="rcbftProductoArticulo"

Display="None"

ErrorMessage="El campo Artículo es obligatorio."

SetFocusOnError="true"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Proveedor:

</td>

<td>

<rad:RadComboBox ID="rcbftProductoProveedor" runat="server"

AutoPostBack="false"

CollapseAnimation-Duration="400"

CollapseAnimation-Type="OutQuint"

Enabled='<%# (Container is GridEditFormInsertItem) %>'

EnableEmbeddedScripts="true"

EnableEmbeddedSkins="false"

EnableLoadOnDemand="true"

EnableVirtualScrolling="true"

ExpandAnimation-Duration="450"

ExpandAnimation-Type="OutQuad"

Height="200px"

MarkFirstMatch="true"

ShowMoreResultsBox="true"

ShowToggleImage="true"

ShowWhileLoading="false"

Skin="Autogrill"

WebServiceSettings-Method="FilterSuppliers"

WebServiceSettings-Path="/Autogrill.Services/ServicioProveedorWebService.asmx" />

<asp:RequiredFieldValidator ID="rfvftProductoProveedor" runat="server"

ControlToValidate="rcbftProductoProveedor"

Display="None"

ErrorMessage="El campo Proveedor es obligatorio."

SetFocusOnError="true"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Formato:

</td>

<td>

<rad:RadComboBox ID="rcbftProductoFormato" runat="server"

AutoPostBack="false"

CollapseAnimation-Duration="400"

CollapseAnimation-Type="OutQuint"

Enabled='<%# (Container is GridEditFormInsertItem) %>'

EnableEmbeddedScripts="true"

EnableEmbeddedSkins="false"

EnableLoadOnDemand="true"

EnableVirtualScrolling="true"

ExpandAnimation-Duration="450"

ExpandAnimation-Type="OutQuad"

Height="200px"

MarkFirstMatch="true"

OnClientItemsRequesting="rcbftProductoFormato_ClientItemsRequesting"

OnClientSelectedIndexChanged="rcbftProductoFormato_CientSelectedIndexChanged"

OnClientDropDownOpening="rcbftProductoFormato_ClientDropDownOpening"

ShowMoreResultsBox="true"

ShowToggleImage="true"

ShowWhileLoading="false"

Skin="Autogrill"

WebServiceSettings-Method="FilterFormatsByUnit"

WebServiceSettings-Path="/Autogrill.Services/ServicioArticuloWebService.asmx" />

<asp:RequiredFieldValidator ID="rfvftProductoFormato" runat="server"

ControlToValidate="rcbftProductoFormato"

Display="None"

ErrorMessage="El campo formato es obligatorio."

SetFocusOnError="true"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Peso Neto:

</td>

<td>

<rad:RadNumericTextBox ID="rntbftProductoPesoNeto" runat="server"

AutoPostBack="false"

EnableAjaxSkinRendering="false"

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false"

MaxLength="8"

MaxValue="99999.99"

NumberFormat-DecimalDigits="2"

SelectionOnFocus="SelectAll"

ShowButton="false"

Skin="Autogrill"

TextMode="SingleLine"

Width="150px" />

<asp:RequiredFieldValidator ID="rfvftProductoPesoNeto" runat="server"

ControlToValidate="rntbftProductoPesoNeto"

Display="None"

ErrorMessage="El campo peso neto es obligatorio."

SetFocusOnError="true"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Caducidad requerida:

</td>

<td>

<asp:CheckBox ID="cbftProductoEsnecesariaCaducidad" runat="server" />

</td>

</tr>

<tr>

<td class="key">

Es traza:

</td>

<td>

<asp:CheckBox ID="cbftProductoEsTraza" runat="server" />

</td>

</tr>

<tr>

<td class="key">

Días para pedido:

</td>

<td>

<rad:RadNumericTextBox ID="rntbftProductoDiasParaPedido" runat="server"

AutoPostBack="false"

EnableAjaxSkinRendering="false"

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false"

MaxLength="3"

MaxValue="600"

NumberFormat-DecimalDigits="0"

SelectionOnFocus="SelectAll"

ShowButton="false"

Skin="Autogrill"

TextMode="SingleLine"

Width="150px" />

</td>

</tr>

<tr>

<td class="key">

Días caducidad:

</td>

<td>

<rad:RadNumericTextBox ID="rntbftProductoDiasCaducidad" runat="server"

AutoPostBack="false"

EnableAjaxSkinRendering="false"

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false"

MaxLength="4"

MaxValue="9999"

NumberFormat-DecimalDigits="0"

SelectionOnFocus="SelectAll"

ShowButton="false"

Skin="Autogrill"

TextMode="SingleLine"

Width="150px" />

</td>

</tr>

<tr>

<td class="key" colspan="2"> </td>

</tr>

</table>

</div>

</td>

<td style="width:50%">

<div class="rgTemplateNineRows">

<table cellspacing="0" cellpadding="0" class="tblSubmodule">

<tr>

<td class="key">

Nombre:

</td>

<td>

<rad:RadTextBox ID="rtbftProductoNombre" runat="server"

AutoPostBack="false"

Columns="0"

EnableAjaxSkinRendering="false"

EnableEmbeddedSkins="false"

ShowButton="false"

Skin="Autogrill"

TextMode="SingleLine"

Text='<%# Eval("Nombre") %>' />

<asp:RegularExpressionValidator ID="revftProductoNombre" runat="server"

ControlToValidate="rtbftProductoNombre"

Display="None"

ErrorMessage="El formato del nombre es incorrecto."

SetFocusOnError="true"

ValidationExpression="<%# Autogrill.Util.Constantes.RegularExpressions.ValidarNombreComplejo50 %>"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Código:

</td>

<td>

<rad:RadTextBox ID="rtbftProductoCodigo" runat="server"

AutoPostBack="false"

Columns="0"

EnableAjaxSkinRendering="false"

EnableEmbeddedSkins="false"

ShowButton="false"

Skin="Autogrill"

TextMode="SingleLine"

Text='<%# Eval("Codigo") %>' />

<asp:RegularExpressionValidator ID="revftProductoCodigo" runat="server"

ControlToValidate="rtbftProductoCodigo"

Display="None"

ErrorMessage="El formato del código es incorrecto."

SetFocusOnError="true"

ValidationExpression="<%# Autogrill.Util.Constantes.RegularExpressions.ValidarLongitud50 %>"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Envase:

</td>

<td>

<rad:RadTextBox ID="rtbftProductoEnvase" runat="server"

AutoPostBack="false"

Columns="0"

EnableAjaxSkinRendering="false"

EnableEmbeddedSkins="false"

ShowButton="false"

Skin="Autogrill"

TextMode="SingleLine"

Text='<%# Eval("Envase") %>' />

<asp:RegularExpressionValidator ID="revftProductoEnvase" runat="server"

ControlToValidate="rtbftProductoEnvase"

Display="None"

ErrorMessage="El formato del envase es incorrecto."

SetFocusOnError="true"

ValidationExpression="<%# Autogrill.Util.Constantes.RegularExpressions.ValidarNombreComplejo50 %>"

ValidationGroup="Guardar" />

</td>

</tr>

<tr>

<td class="key">

Especificaciones:

</td>

<td>

<asp:LinkButton ID="lbftProductoEspecificaciones" runat="server" EnableViewState="true"

OnClientClick="return OpenPopUpProductoEspecificaciones(this);"

Text="<%# Autogrill.Util.Constantes.Constants.PopUpLinkSinSeleccion %>" />

<asp:HiddenField ID="hfftProductoEspecificaciones" runat="server" />

</td>

</tr>

<tr>

<td class="key">

Consevación:

</td>

<td>

</td>

</tr>

<tr>

<td class="key">

Notas:

</td>

<td>

</td>

</tr>

<tr>

<td class="key">

Alergénicos:

</td>

<td>

</td>

</tr>

<tr>

<td class="key">

Precios Ligados:

</td>

<td>

</td>

</tr>

<tr>

<td class="key">

Vat producto:

</td>

<td>

</td>

</tr>

</table>

</div>

</td>

</tr>

<tr>

<td colspan="2" align="right">

<asp:LinkButton id="bftActualizar" runat="server"

Text="Actualizar"

CommandName="Update"

CssClass="enlace"

ValidationGroup="Guardar"

Visible='<%# !(Container is GridEditFormInsertItem) %>' />

<asp:LinkButton id="bftInsertar" runat="server"

Text="Insertar"

CommandName="PerformInsert"

CssClass="enlace"

ValidationGroup="Guardar"

Visible='<%# (Container is GridEditFormInsertItem) %>' />

<asp:LinkButton id="bftCancelar" runat="server"

Text="Cancelar"

CommandName="Cancel"

CssClass="enlace"

CausesValidation="false" />

<asp:ValidationSummary ID="vsftTipoPago" runat="server"

DisplayMode="List"

EnableClientScript="true"

ShowMessageBox="true"

ShowSummary="false"

ValidationGroup="Guardar" />

<rad:RadWindowManager ID="rwmProductos" runat="server"

EnableAjaxSkinRendering="false"

EnableEmbeddedSkins="false"

EnableEmbeddedBaseStylesheet="false"

ShowContentDuringLoad="false"

VisibleStatusbar="false"

ReloadOnShow="false"

Skin="Autogrill"

EnableShadow="true">

<Windows>

<rad:RadWindow ID="rwProductoEspecificaciones" runat="server"

Behaviors="Close,Move,Reload,Resize"

KeepInScreenBounds="true"

NavigateUrl="../../dialog/productos/especificaciones.aspx"

OnClientClose="OnClientCloseProductoEspecificaciones"

OnClientShow="OnClientShowProductoEspecificaciones"

Width="880"

Height="485" />

</Windows>

</rad:RadWindowManager>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</rad:RadGrid>

</div>

<%-- Calendario utilizado por los controles RadDatePicker (de fechas) de la página --%>

<rad:RadCalendar ID="rcProductoFechas" runat="server"

EnableAjaxSkinRendering="false"

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false"

EnableMultiSelect="false"

EnableViewState="false"

RangeMinDate="2000/01/01"

Skin="Autogrill"

UseColumnHeadersAsSelectors="false"

UseRowHeadersAsSelectors="false" />

<%-- Gestor ajax para el enlace entre las RadGrids y los paneles de (re)carga --%>

<rad:RadAjaxManager ID="ramAjax" runat="server">

<AjaxSettings>

<%-- Controles que se actualizan con una nueva consulta --%>

<rad:AjaxSetting AjaxControlID="bConsultar">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgResultados" LoadingPanelID="ralpResultados" />

</UpdatedControls>

</rad:AjaxSetting>

<%-- Controles que se actualizan a través de operaciones CRUD en la RadGrid --%>

<rad:AjaxSetting AjaxControlID="rgResultados">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgResultados" LoadingPanelID="ralpResultados" />

</UpdatedControls>

</rad:AjaxSetting>

</AjaxSettings>

</rad:RadAjaxManager>

<%-- Plantilla de carga ajax para las RadGrids de la página --%>

<rad:RadAjaxLoadingPanel ID="ralpResultados" runat="server"

CssClass="loadingGrid"

HorizontalAlign="Justify"

Transparency="30"

EnableEmbeddedScripts="true"

Width="100%" />

<%-- Codigo javascript para gestionar la selección de filas de usuarios --%>

<rad:RadScriptBlock ID="rsbAlmacenModosAlmacen" runat="server">

<script type="text/javascript">

/**********************************************************************************/

/* ESTABLECE EL CONTEXTO DEL SERVICIO DEL FORMATO CON LA UNIDAD A FILTRAR */

/**********************************************************************************/

/**

* This function loads the data of the selected product in the data panel and

* updates the link to open the edition window.

*

* Parameter description:

* sender: the <RadGrid> object that fired the event.

* args: the data associated to the event.

*/

function rgResultados_ClientRowSelected(sender, args)

{

$("#bModificar").unbind("click").popupWindow({

height: 85,

width: 80,

windowURL: "gestion.aspx?<%= Autogrill.Util.Constantes.Constants.Contrato %>=" + encodeURI(args.getDataKeyValue("Identificador")),

centerScreen: 1

});

$("#<%= lDetalleProductoPesoNeto.ClientID %>").text(args.getDataKeyValue("PesoNeto"));

$("#<%= lDetalleProductoCodigo.ClientID %>").text(args.getDataKeyValue("Codigo"));

$("#<%= lDetalleProductoNotas.ClientID %>").text(args.getDataKeyValue("Notas"));

$("#<%= cbDetalleProductoEsNecesarioCaducidad.ClientID %>").attr("checked", Boolean.parse(args.getDataKeyValue("EsNecesarioCaducidad")));

$("#<%= lDetalleProductoEspecificaciones.ClientID %>").text(args.getDataKeyValue("Especificaciones"));

$("#<%= cbDetalleProductoEsTraza.ClientID %>").attr("checked", Boolean.parse(args.getDataKeyValue("EsTraza")));

$("#<%= lDetalleProductoConservacion.ClientID %>").text(args.getDataKeyValue("Conservacion"));

$("#<%= lDetalleProductoDiasParaPedido.ClientID %>").text(args.getDataKeyValue("DiasParaPedido"));

$("#<%= lDetalleProductoDiasCaducidad.ClientID %>").text(args.getDataKeyValue("DiasCaducidad"));

}

/**

* This function clears the data of the selected product from the data panel and

* sets empty the link to open the edition window.

*

* Parameter description:

* sender: the <RadGrid> object that fired the event.

* args: the data associated to the event.

*/

function rgResultados_ClientTableDestroying(sender, args)

{

$("#bModificar").unbind("click");

$("#<%= lDetalleProductoPesoNeto.ClientID %>").text("");

$("#<%= lDetalleProductoCodigo.ClientID %>").text("");

$("#<%= lDetalleProductoNotas.ClientID %>").text("");

$("#<%= lDetalleProductoEspecificaciones.ClientID %>").text("");

$("#<%= lDetalleProductoConservacion.ClientID %>").text("");

$("#<%= lDetalleProductoDiasParaPedido.ClientID %>").text("");

$("#<%= lDetalleProductoDiasCaducidad.ClientID %>").text("");

$("#<%= cbDetalleProductoEsNecesarioCaducidad.ClientID %>").attr("checked", false);

$("#<%= cbDetalleProductoEsTraza.ClientID %>").attr("checked", false);

}

/**

* This function register the element that fired the event, opening a

* pop up with the product's specifications

*

* Parameter description:

* oArgs: an <a> element that fired the event.

*/

function OpenPopUpProductoEspecificaciones(oArgs) {

// Saves a reference to the link and associated hidden field

hiddenProductoEspecificaciones = $(oArgs).parent().find("[id$='hfftProductoEspecificaciones']");

labelProductoEspecificaciones = $(oArgs);

// Opens the pop up

var oWnd = radopen(null, "rwProductoEspecificaciones");

// Avoids postback

return false;

}

/**

* This function is called when a window is being shown, and is perfect for

* setting an argument to the window. It reads the data stored in the

* associated hidden field and passes it to the pop up of priduct's prices

* selection converted to an array.

*

* Parameter description:

* oWnd: a <RadWindow> object which to pass the data (product's price elements).

*/

function OnClientShowProductoEspecificaciones(oWndEan) {

// Create a new Object to be used as an argument to the radWindow

oWndEan.Argument = hiddenProductoEspecificaciones.val();

}

/**

* This function is called when a window is closed, and is perfect for

* retrieving the data to the parent window. It extracts the information from

* the argument received in the oArgs parameter.

*

* Parameter description:

* oWnd: a <RadWindow> object which to extract from the data (ean identifiers).

* oArgs: the data (names and identifiers of allergenics) to be parsed.

*/

function OnClientCloseProductoEspecificaciones(oWndEan, oArgs) {

// Reads the data

var args = oArgs.get_argument();

if (args != null) {

// var valueHtml = args.match(/.*[\n\|]/g);

// valueHtml = valueHtml.substring(0, valueHtm.lenght-1);

// var valueTxt = args.match(/\|.*\n/g);

// valueTxt = valueTxt.substring(1, valueTxt.lenght);

// Stores the data in the hidden field

hiddenProductoEspecificaciones.val(args);

// Updates link text

labelProductoEspecificaciones.text(args);

}

</script>

</rad:RadScriptBlock>

<%-- Descriptor del mapa del sitio --%>

<asp:SiteMapDataSource ID="smdsAutogrill" runat="server" ShowStartingNode="false" />

</form>

</body>

</html>

Thanks in advance, and sorry for my bad English.

answered on 23 Feb 2011, 03:33 PM

Hello José Mª,

In the earlier post I requested your code to see whether you use the RadEditor in RadWindow in a well known problematic scenario which makes the editor disabled. The problem and the solution are discussed in the following PITS item: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/4889, e.g.

FIX RadEditor is unusable when inside a control containter of RadWindow

If you use RadWindow to display a RadEditor instance the buttons in RadEditor do not work (rendering it unusable). The issue only arises when RadWindow is used as a control containter (i.e. the RadEditor is within the <ContentTemplate> of RadWindow).

To fix the problem you must execute the onParentNodeChanged() method of the RadEditor object after it is shown.

It appeared from your code that you do not use the editor in ContentTemplate, but NavigateUrl. The problem could be due to some JS error in Firefox that is breaking the editor.

Since we are not aware of any problems with RadEditor when loaded in RadWindow through the NavigateUrl property, I kindly ask you to provide at least a live URL to the problematic page so that we can test it.

It will be best if you are able a fully working project, but we will need a least a live URL so that we can debug the problem.

Best regards,
Rumen
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 20 Mar 2013, 03:32 PM

I am using a RadEditor with contentareamode="div" and a Save button to save the content to database
My page is using RadAjaxPanel and is inside a Master page.
I am using the Font Name tool. So when i change the font, it gives the scripting error in Chrome as "Uncaught TypeError: Cannot read property 'length' of undefined
" and in Firefox "c is undefined" and the script is the embedded telerik script.
Code below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2"

MasterPageFile="~/MasterPages/HomePage.master"%>

<%@ Register Src="~/UserControl/ProcessingRequest.ascx" TagName="ProcessingRequest"

TagPrefix="ProcessingRequest" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" ClientEvents-OnResponseEnd="UpdateJavascript"

LoadingPanelID="AjaxLoadingPanel">

<telerik:RadCodeBlock ID="radCodeBlock" runat="server">

<script type='text/javascript'>

$(document).ready(function () {

UpdateJavascript();

});

function HeightControl() {

var WindowWidth = $(window).width();

var footerHeight = 24;

var statusMsgHeight = 0;

var screenWidht = $(window).width();

var statusMsg = $('.SuccessMsg').height();

if (statusMsg != null) {

statusMsgHeight = 20;

}

function UpdateJavascript() {

HeightControl();

$(window).resize(function () {

HeightControl();

});

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Transparency="10"

BackColor="#E0E0E0">

<div id="divProcessingRequest" style="height: 150px; width: 150px; top: 25%; left: 33%;

position: absolute; z-index: 850;">

<ProcessingRequest:ProcessingRequest ID="GenerateReport" runat="server" />

</div>

</telerik:RadAjaxLoadingPanel>

<div id="divLoading" runat="server" style="bottom: 0; left: 0; position: absolute;

background-color: #454545; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;

height: 100%; width: 100%; z-index: 850; visibility: hidden;">

</div>

<p runat="server" visible="false" id="notesStatusMessage" style="margin-left: 6px;"

class="SuccessMsg">

</p>

<telerik:RadEditor ID="radNotes" runat="server" BackColor="white" EditModes="Design" ContentAreaMode="Div"

Width="100%" ContentFilters="RemoveScripts" StripFormattingOnPaste="Span,MSWordRemoveAll">

<CssFiles>

<telerik:EditorCssFile Value="~/includes/Editor.Custom.css" />

</CssFiles>

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Underline" />

<telerik:EditorTool Name="Italic" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Undo" />

<telerik:EditorTool Name="Redo" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="FontName" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="ForeColor" />

<telerik:EditorTool Name="BackColor" />

<telerik:EditorTool Name="InsertUnorderedList" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

<div class="right_btn_wrap">

<asp:Button ID="btnSaveNotes" runat="server" Text="Save" class="button gray"

OnClick="SaveNotes_Click" />

<asp:Button ID="btnCancelNotes" runat="server" Text="Cancel" class="button gray" OnClick="CancelSaveNotes_Click" />

</div>

</telerik:RadAjaxPanel>

</asp:Content>

C# code

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindNotes();

}

#region Notes

private void BindNotes()

{

try

{

radNotes.Content = "Some content from database";

}

catch (Exception ex)

{

}

protected void SaveNotes_Click(object sender, EventArgs e)

{

try

{

bl.SaveNotes( radNotes.Content); //method in BL

BindNotes();

notesStatusMessage.Visible = true;

notesStatusMessage.InnerHtml = "Notes saved successfully";

}

catch (Exception ex)

{

notesStatusMessage.Visible = true;

notesStatusMessage.InnerHtml = "Notes could not be saved due to the following error :" + ex.Message;

}

protected void CancelSaveNotes_Click(object sender, EventArgs e)

{

BindNotes();

}

In this case, there is no server exception occuring.
When I change the contentareamode to iframe, it works fine with Chrome and FF but problem occurs with IE browser where it fails to render the markup and goes blank (shows no content and no server or client side error)

answered on 25 Mar 2013, 11:21 AM

EditorSample.zip

Hi Shyam,

The problem under Chrome and Firefox is logged in our system and its priority is now raised. Nevertheless I cannot provide a firm estimate when it is going to be fixed.

I tried to reproduce the issue with rendering the RadEditor under IE using your code sample, but to no avail. Please compare the attached test page to your actual project and check if there are differences in the setup.

You can try registering the RadEditor’s CSS files manually on the page as described in the following help resources:
- Registering an external skin of RadEditor;
- Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent;

If you are still having difficulties, please modify my sample so that the problem can be reproduced. In case this is not possible, you can also send a simple, fully runnable project that isolates the issue. This will allow us to inspect it locally and provide a more to the point answer.

Greetings,
Slav
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadEditor (ContentAreaMode='Div') + RadWindow + Firefox

5 Answers, 1 is accepted

FIX RadEditor is unusable when inside a control containter of RadWindow