$telerik cancelRawEvent doesn't cancel event for carriage return

[Raddy Rad]

as shown by many posts before, here's how i attach the key up events

function OnClientLoad(editor, args)
{
editor.attachEventHandler("onkeyup", handler);
}

function handler(eventArgs)
{
if (eventArgs.keyCode == "13") 
{ 
$telerik.cancelRawEvent(eventArgs); 
return;
}
... other stuff
}

I have tried it with other keystrokes and the cancelRawevent call can prevents those keystrokes, but not carriage return. Any ideas?

[Rumen Jekov]

Hi,

Try to set the NewLineBr property to false. This should do the trick.


Best regards,
Rumen

[Raddy Rad]

That was it! Thanks! 

[Brian Garson]

Sorry to re-open an old thread but it was one of the only ones that I could find on this subject.  I'm running similar code, and I cannot get the carriage return to filter out / be prevented using Firefox, everything works great with IE and Chrome.

I'm using this version of Telerik:  2010.2.826.35

<telerik:RadEditor Skin="Office2007"  CssClass="HeaderEditor" EditModes="Design" ID="Txt_TextImageHeader"
                                                                       ToolbarMode="ShowOnFocus" contentCtrl="qwer" OnClientLoad="OnSingleLineClientLoad"
                                                                       OnClientSelectionChange="OnClientSelectionChange"
                                                                       Height="60" NewLineBr="false" OnClientCommandExecuting="OnClientCommandExecuting" OnClientCommandExecuted="RadToolbar_ClientButtonClicked"
                                                                       ContentFilters="ConvertCharactersToEntities,RemoveScripts" ToolsFile="~/App_Data/xml/SmartEditorTools.xml" runat="server"
                                                                       ExternalDialogsPath="~/EditorDialogs" Width="350"  OnClientPasteHtml="RadEditor_ClientPasteHtmlHeader"
                                                                       ContentAreaCssFile="~/styles/CampaignBuilderRadEditor.css">
                                                                   </telerik:RadEditor>

function OnSingleLineClientLoad(editor, args) {
    //$.log('OnSingleLineClientLoad(editor, args)', debugHighlightsEnum.FunctionName);
    editor.attachEventHandler("onkeydown", ignoreCarriageReturn);
    editor.attachEventHandler("onkeyup", headerUpdater);
    editor.attachEventHandler("onblur", function(e) { addCurrentStateToUIStack(); });

   //on clicking the radEditor show the radToolbar
   if ($telerik.isIE) editor.get_toolAdapter().enableContextMenus(false);
}


// filter out the carriage return key
function ignoreCarriageReturn(eventArgs) {
    //$.log('ignoreCarriageReturn(eventArgs)', debugHighlightsEnum.FunctionName);
    if (eventArgs.keyCode == "13") {
        $telerik.cancelRawEvent(eventArgs);
        return;
    }
}

I'm wondering if this is a known issue, or am I missing something Firefox Specific?

thanks,

[Rumen]

Hello Brian,

I already answered your support ticket. I just want to share the solution with the community. Here it is:

All you need to do is to set the NewLineBr property to true. This will enable the default behavior of Firefox for the Enter key and the

$telerik.cancelRawEvent(eventArgs); 

will start to work in that browser.

All the best,
Rumen
the Telerik team

[Alejandro]

Hi,

Even I've added the property NewLineBr="true" It does not work for IE9 and Chrome lasted version but the enter key ( carriage return) event cancel works only in Firefox.

I was trying to limit the max characters, I need the HTML length to be limited onkeydown event something that has been discussed in http://www.telerik.com/community/forums/aspnet-ajax/chart/charector-limit-in-rad-editor.aspx 
Every enter in Text view is adding a <br/> line in HTML code. I need the HTML but I have the length restriction then I can't cancel the insertion of new lines as the raw cancellation does not work for the Enter key.

Thanks

[Rumen]

Hi,

My suggestion is to set the NewLineMode property to "P" and modify the isAlphaNumericKey function as follow:

function isAlphaNumericKey(keyCode) {
    if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91) || (keyCode == 13)) {
        return true;
    }
    return false;
}

The whole code is:

<telerik:RadEditor ID="RadEditor1" runat="server" NewLineMode="P" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml">
    <Content></Content>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor2" runat="server" NewLineMode="P" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml">
    <Content></Content>
</telerik:RadEditor>
 <div id="counter"></div>
<script type="text/javascript">
    var editorList = new Object();
    var editorLengthArray = [20, 30];
    var counter = 0;

    function isAlphaNumericKey(keyCode) {
        if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91) || (keyCode == 13)) {
            return true;
        }
        return false;
    }

    function LimitCharacters(editor) {
        editorList[editor.get_id()] = editorLengthArray[counter];
        counter++;
        editor.attachEventHandler("onkeydown", function (e) {
            e = (e == null) ? window.event : e;
            if (isAlphaNumericKey(e.keyCode)) {
                var maxTextLength = editorList[editor.get_id()];
                textLength = editor.get_text().length;
                if (textLength >= maxTextLength) {
                    if ($telerik.isIE) {
                        alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    }
                    $telerik.cancelRawEvent(e);
                }
            }
        });
        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "paste", function (e) {
            e = (e == null) ? window.event : e;

            var maxTextLength = editorList[editor.get_id()];
            textLength = editor.get_text().length;

            var clipboardLength = window.clipboardData.getData("Text").length;
            textLength += clipboardLength;
            if (textLength >= maxTextLength) {
                alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                e.returnValue = false;
                return false;

            }
        });
    }

    function CalculateLength(editor, value) {
        var textLength = editor.get_text().length;
        var clipboardLength = value.length;
        textLength += clipboardLength;
        return textLength;
    }

    function OnClientPasteHtml(editor, args) {
        var maxTextLength = editorList[editor.get_id()];
        var commandName = args.get_commandName();
        var value = args.get_value();

        if (commandName == "PasteFromWord"
                || commandName == "PasteFromWordNoFontsNoSizes"
                || commandName == "PastePlainText"
                || commandName == "PasteAsHtml"
                || commandName == "Paste") {
            var textLength = CalculateLength(editor, value);
            if (textLength >= maxTextLength) {
                alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                args.set_cancel(true);

            }
        }
    }
 </script>

Greetings,
Rumen
the Telerik team

[Alejandro]

I'm still having this issue. The NewLineMode=P did not fix the proble plus the Alphanumeric function is not the problem as I had modified before my post as I had noticed that did not count the enter key then HTML length did not stop when the max length was reached.
Like before only for FireFox the Enter Key is canceled with $telerik.cancelRawEvent(e).

Have you test it with IE 9 and Chrome ?

Thanks

[Rumen]

Hello,

The following code covers IE and Chrome too:

<telerik:RadEditor ID="RadEditor1" runat="server" NewLineMode="BR" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml" OnClientCommandExecuting="commandExecuting">
    <Content></Content>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor2" runat="server" NewLineMode="BR" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml" OnClientCommandExecuting="commandExecuting">
    <Content></Content>
</telerik:RadEditor>
 <div id="counter"></div>
<script type="text/javascript">
    var editorList = new Object();
    var editorLengthArray = [20, 30];
    var counter = 0;

    var cancelEnter = false;

    function isAlphaNumericKey(keyCode) {
        if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) {
            return true;
        }
        return false;
    }

    function commandExecuting(editor, args) {
        if (args.get_commandName() == "EnterNewLine" && cancelEnter)
            args.set_cancel(true);
    }

    function LimitCharacters(editor) {
        editorList[editor.get_id()] = editorLengthArray[counter];
        counter++;
        editor.attachEventHandler("onkeydown", function (e) {
            //console.log(e.keyCode);
            e = (e == null) ? window.event : e;
            var maxTextLength = editorList[editor.get_id()];
            var textLength = editor.get_text().length;

            if (isAlphaNumericKey(e.keyCode) || e.keyCode == 13) {

                if (textLength >= maxTextLength) {
                    //alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    $telerik.cancelRawEvent(e);
                    cancelEnter = true;

                }
            }
        });
        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "paste", function (e) {
            e = (e == null) ? window.event : e;

            var maxTextLength = editorList[editor.get_id()];
            textLength = editor.get_text().length;

            var clipboardLength = window.clipboardData.getData("Text").length;
            textLength += clipboardLength;
            if (textLength >= maxTextLength) {
                alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                e.returnValue = false;
                return false;

            }
        });
    }

    function CalculateLength(editor, value) {
        var textLength = editor.get_text().length;
        var clipboardLength = value.length;
        textLength += clipboardLength;
        return textLength;
    }

    function OnClientPasteHtml(editor, args) {
        var maxTextLength = editorList[editor.get_id()];
        var commandName = args.get_commandName();
        var value = args.get_value();

        if (commandName == "PasteFromWord"
                || commandName == "PasteFromWordNoFontsNoSizes"
                || commandName == "PastePlainText"
                || commandName == "PasteAsHtml"
                || commandName == "Paste") {
            var textLength = CalculateLength(editor, value);
            if (textLength >= maxTextLength) {
                alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                args.set_cancel(true);

            }
        }
    }
 </script>

Kind regards,
Rumen
the Telerik team

[Arron]

This will not restrict a user from keying in carriage returns before they hit the character limit. This only works after you hit the character limit, but then enter key will no longer work even if you delete some characters after that.

[Alejandro]

Ok now yes using OnClientCommandExecuting I manage to do it what I need.