How do I modify js alert messages for MaxTextLength attribute of Editor?

[Joe Sauve]

I have a RadEditor ("Bio Summary") on which I've customized the tool strips and on which I have a MaxTextLength of 100 characters. This is 1 of 2 RadEditors that I have on the page. The other one ("Bio") has a character limit of 4000.

The problem is that when the 100-character limit is exceeded in the one RadEditor ("Bio Summary"), the javascript alert that is popped is very generic and doesn't indicate to the user which one of the two RadEditors has exceeded the limit:

"The added text exceeded the character limit 100. Please, reduce the content of the field."

How do I change the message in the javascript alert that is popped? Thank in advance.

[Rumen]

Hi Joe,

Here is an example demonstrating how to override the displayMaxTextLengthErrorMessage function and display the error message in a DIV element:

<telerik:RadEditor MaxTextLength="10" runat="server" ID="RadEditor1"></telerik:RadEditor>
<div id="counter"></div>
<script type="text/javascript">

Telerik.Web.UI.RadEditor.prototype.displayMaxTextLengthErrorMessage = function()
{
    var editor = $find("<%=RadEditor1.ClientID%>");
    $get("counter").innerHTML = "You are not allowed to type more than " + editor.get_maxTextLength() + " symbols";
}
</script>
<asp:Button ID="btn_test" Text="Test" runat="server" />

When the MaxHtmlLength property is set then you should override the displayMaxHtmlLengthErrorMessage function.

You can customize the function to achieve your scenario.

Greetings,
Rumen
the Telerik team

[Joe Sauve]

Wicked awesome. Thanks, Rumen.

[Joe Sauve]

Any idea why I'm getting this exception from that suggestion?:

"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."

Here's the pertinent chunk of markup/code:

<telerik:RadEditor ID="radSummary" runat="server" SkinID="ContentSimpleEditor" Width="700" ExternalDialogsPath="~/Content/Telerik/EditorDialogs/" MaxTextLength="100">
    <Tools>
            <telerik:EditorToolGroup Tag="simpleCopyPaste">
                    <telerik:EditorTool Name="Cut" />
                        <telerik:EditorTool Name="Copy" />
                        <telerik:EditorTool Name="Paste" />
                </telerik:EditorToolGroup>
        </Tools>
</telerik:RadEditor>
<div id="radSummaryCounter"></div>
<script type="text/javascript">
    Telerik.Web.UI.RadEditor.prototype.displayMaxTextLengthErrorMessage = function () {
            var radSummaryEditor = $find("<%=radSummary.ClientID%>");
            $get("radSummaryCounter").innerHTML = "Please limit the Summary to " + radSummaryEditor.get_maxTextLength() + " characters";
        }
</script>

[Joe Sauve]

I figured out where the exception was coming from: I couldn't dynamically pull the RadEditor ID, so I just referenced it explicitly as "radSummary" instead of "<%=radSummary.ClientID%>"

[Joe Sauve]

Awww, crap. That's not gonna work because we're using the junky pre-4.0 auto ID's. Hmmm....

[Rumen]

Hi Joe,

You can try the following code to get a reference to RadEditor

<script type="text/javascript">

    functionpageLoad() {
        if(typeof($telerik) != "undefined") {
            if($telerik.radControls && Telerik.Web.UI.RadEditor) {
                for(vari = 0; i < $telerik.radControls.length; i++) {
                    varcontrol = $telerik.radControls[i];
                    if(Telerik.Web.UI.RadEditor.isInstanceOfType(control)) {
                        //control is a radeditor object
                        control.set_html("<b>hello<b>");
                    }
                }
            }
        }
    }
</script>

The code should be run after our controls have been initialized (after the Sys.Application.Init event). The code I have pasted includes some extra checks to make sure it does not fail if there is no RadEditor on the page. To check the type of the control I use the isInstanceOfType method. See this article for more information: How-to create a javascript array of all particular RadControls on the page.

Another approach is to attach the OnClientLoad(editor) event to get a reference to RadEditor. See this KB article for more information: Executing custom code called on RadEditor's events.



Best wishes,
Rumen
the Telerik team