$telerik cancelRawEvent doesn't cancel event for carriage return

11 posts, 0 answers
  1. Raddy Rad
    Raddy Rad avatar
    24 posts
    Member since:
    Oct 2009

    Posted 07 Jan 2011 Link to this post

    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?
  2. Rumen Jekov
    Rumen Jekov avatar
    70 posts
    Member since:
    Apr 2004

    Posted 07 Jan 2011 Link to this post

    Hi,

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


    Best regards,
    Rumen
  3. Raddy Rad
    Raddy Rad avatar
    24 posts
    Member since:
    Oct 2009

    Posted 07 Jan 2011 Link to this post

    That was it! Thanks! 
  4. Brian Garson
    Brian Garson avatar
    54 posts
    Member since:
    Jan 2008

    Posted 07 Jun 2011 Link to this post

    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,


  5. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 08 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Alejandro
    Alejandro avatar
    3 posts
    Member since:
    Feb 2012

    Posted 29 Feb 2012 Link to this post

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

    Posted 01 Mar 2012 Link to this post

    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
    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.
  8. Alejandro
    Alejandro avatar
    3 posts
    Member since:
    Feb 2012

    Posted 01 Mar 2012 Link to this post

    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
  9. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Mar 2012 Link to this post

    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
    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.
  10. Arron
    Arron avatar
    6 posts
    Member since:
    Mar 2012

    Posted 07 Mar 2012 Link to this post

    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.
  11. Alejandro
    Alejandro avatar
    3 posts
    Member since:
    Feb 2012

    Posted 07 Mar 2012 Link to this post

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

Back to Top