RadEditor MaxHtmlLength RadAjaxLoadingPanel Problem in UI for ASP.NET AJAX Editor

Matthew Ricker

3 posts

Member since:
Feb 2010

Posted 05 Dec 2012 Link to this post

Hello,

Here is my setup:

I have a masterpage with a RadAjaxManager on it, and a content page with a RadAjaxManagerProxy on it.

The content page has 2 asp:panels (a master/detail type page) , the detail panel is hidden by default (and contains multiple rad editors)

Selecting a row from panel 1 will show panel 2 using the RadAjaxManagerProxy AjaxSettings.

Panel 2 has some textboxes, and rad editors, and a save and cancel button. I am able to save no problem everything works.

However when using MaxHtmlLength to validate the rad editors, clicking save will show the default Telerik javascript alert() and stop the page from posting, but it doesn't stop the loading panel from displaying. It just spins and wont stop until I refresh or close or whatever. It does not actually post to the server, it just seems to be in limbo land.

Any suggestions?

Thanks!

Matthew Ricker

3 posts

Member since:
Feb 2010

Posted 05 Dec 2012 Link to this post

Hello,

Here is my setup:

I have a masterpage with a RadAjaxManager on it, and a content page with a RadAjaxManagerProxy on it.

The content page has 2 asp:panels (a master/detail type page) , the detail panel is hidden by default (and contains multiple rad editors)

Selecting a row from panel 1 will show panel 2 using the RadAjaxManagerProxy AjaxSettings.

Panel 2 has some textboxes, and rad editors, and a save and cancel button. I am able to save no problem everything works.

However when using MaxHtmlLength to validate the rad editors, clicking save will show the default Telerik javascript alert() and stop the page from posting, but it doesn't stop the loading panel from displaying. It just spins and wont stop until I refresh or close or whatever. It does not actually post to the server, it just seems to be in limbo land.

Any suggestions?

Thanks!

Master page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="RadEditorTest.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

<script type="text/javascript">

function MainAjaxManagerOnRequestStart(sender, args) {

if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 || args.get_eventTarget().indexOf("ExportToCsvButton") >= 0 || args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 || args.get_eventTarget().indexOf("ExportToWordButton") >= 0)

args.set_enableAjax(false);

}

</script>

</head>

<body>

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

<telerik:RadScriptManager ID="MainRadScriptManager" runat="server" />

<telerik:RadStyleSheetManager ID="radstylesheetmanager1" runat="server">

<StyleSheets>

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Editor.Default.css" />

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Window.Default.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

<telerik:RadAjaxManager ID="MainRadAjaxManager" runat="server" ClientIDMode="Static" DefaultLoadingPanelID="RadAjaxLoadingPanel1" ClientEvents-OnRequestStart="MainAjaxManagerOnRequestStart">

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</form>

</body>

</html

>



Content Page




<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadEditorTest.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="MasterViewPanel">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="MasterViewPanel" LoadingPanelID="LoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="DetailPanel" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="DetailPanel" >
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="MasterViewPanel" LoadingPanelID="LoadingPanel1"  />
                <telerik:AjaxUpdatedControl ControlID="DetailPanel" LoadingPanelID="LoadingPanel1" />   
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
  
 
<asp:Panel ID="MasterViewPanel" runat="server">
 
Some fake info here... click to see details..<br />
<asp:Button ID="ShowDetailPanel" runat="server" Text="Show Detail"
        onclick="ShowDetailPanel_Click"/>
 
 
</asp:Panel>
 
<asp:Panel ID="DetailPanel" runat="server" Visible="false" >
 
    <label>Some fake field:</label><br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br /><br />
 
    <label>Editor 1:</label><br />
    <telerik:RadEditor runat="server" ID="RadEditor1" MaxHtmlLength="10"></telerik:RadEditor>         
    <br /><br />
    
    <label>Editor 2:</label><br />
    <telerik:RadEditor runat="server" ID="RadEditor2" ></telerik:RadEditor>
  
    <br /><br />
 
    <telerik:RadButton runat="server" ID="SaveRadButton" runat="server" Text="Save"
            UseSubmitBehavior="false" onclick="SaveRadButton_Click" />
     
    <telerik:RadButton runat="server" ID="CancelRadButton" runat="server"
            Text="Cancel" onclick="CancelRadButton_Click" />
 
</asp:Panel>
 
 
<div style="display:none">
    <!-- Hidden editor To help Render the correct scripts etc -->
    <telerik:RadEditor runat="server" ID="FakeRadEditor" ></telerik:RadEditor>
</div>
 
</asp:Content>



Code Behind




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
 
namespace RadEditorTest
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void SaveRadButton_Click(object sender, EventArgs e)
        {
            //do some fake save!
            Thread.Sleep(1000);
 
            MasterViewPanel.Visible = true;
            DetailPanel.Visible = false;
        }
 
        protected void CancelRadButton_Click(object sender, EventArgs e)
        {
            //cancel
            MasterViewPanel.Visible = true;
            DetailPanel.Visible = false;
        }
 
        protected void ShowDetailPanel_Click(object sender, EventArgs e)
        {
            //sleep so that the loading panel will show...
            Thread.Sleep(1000);
            MasterViewPanel.Visible = false;
            DetailPanel.Visible = true;
        }
    }
}

Rumen

Admin

14324 posts

Posted 06 Dec 2012 Link to this post

Hi,

The issue appears because RadEditor cancels the callback to the server but the AjaxLoadingPanel continues to wait for a response which will never come.

To workaround the issue, hide the AjaxLoadingPanel after showing the alert message using the following script:

<telerik:RadEditor ID="txtSample" runat="server" MaxTextLength="1">

</telerik:RadEditor>

<script type="text/javascript">

var panel = null;

var editor = null;

Telerik.Web.UI.RadEditor.prototype.displayMaxTextLengthErrorMessage = function () {

panel = $find("<%=RadAjaxLoadingPanel1.ClientID %>");

editor = "<%=pnlContent.ClientID %>";

alert(this.get_localization()["exceededtextlength"] + " " + this.get_maxTextLength() + ". " + this.get_localization()["reducetheconentlength"] + ".");

if (panel != null) {

setTimeout(function () {

panel.hide(editor);

}, 1000);

}

</script>

For your convenience I have attached my test page: Default.aspx.

Kind regards,
Rumen
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.

Leslie Huszar

1 posts

Member since:
Feb 2010

Posted 06 Dec 2012 Link to this post

That works,

Thanks.