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

6 posts, 0 answers
  1. José Mª
    José Mª avatar
    4 posts
    Member since:
    Oct 2007

    Posted 16 Feb 2011 Link to this post

    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...
  2. Rumen
    Admin
    Rumen avatar
    14080 posts

    Posted 18 Feb 2011 Link to this post

    Hello José Mª,

    Can you please send us markup declaration of RadWindow and write how exactly you open the RadWindow dialog? If possible provide a fully working project that demonstrates the problem by opening a support ticket.

    Kind regards,
    Rumen
    the Telerik team
  3. José Mª
    José Mª avatar
    4 posts
    Member since:
    Oct 2007

    Posted 21 Feb 2011 Link to this post

    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">
     
        <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"
     
     
        <%-- 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">
                                                        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">
                                                        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.
  4. Rumen
    Admin
    Rumen avatar
    14080 posts

    Posted 23 Feb 2011 Link to this post

    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!
  5. Shyam
    Shyam avatar
    1 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2013 Link to this post

    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)
  6. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 25 Mar 2013 Link to this post

    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.
Back to Top