How to wrap long text to single line textbox - format as multiline

5 posts, 1 answers
  1. Vasssek
    Vasssek avatar
    185 posts
    Member since:
    Aug 2010

    Posted 23 Jul 2018 Link to this post

    Hi,

    could somebody help me with my issue ? I have radtextbox with TextMode="SingleLine". This textbox awaits user's scanned barcode with enter key as last char. Then I process input text in OnValueChanged client side event. So far so good. The problem has appeared when input text is longer then radtextbox width. The situation is shown in attachment.

    The question is, how to style single line radtexbox so it will look like multiline (increase height and wrap text), but still acts as SingleLine, e.g. on enter key press no new row will be added, just OnValueChanged event should rise...

    Thank you

    Best regards

    Vasssek

  2. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 25 Jul 2018 Link to this post

    Hello,

    When the TextMode of RadTextBox is set to SingleLine, the control is rendered as an input element, which does not support multiline capabilities and word-wrapping. You can find more details in StackOverflow: Multiple lines of input in <input type=“text” />.

    What you can do is to set the TextMode to "MultiLine" and attach to the OnKeyPress event of the rendered textarea, which will allow you to prevent the Enter key execution.

    Here you are an example:

    <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" TextMode="MultiLine" Text="Some very long wrapped text on multiple lines">
        <ClientEvents OnKeyPress="CancelNewLine" OnValueChanged="OnValueChanged" />
    </telerik:RadTextBox>
    <script type="text/javascript">
        function CancelNewLine(sender, eventArgs) {
            var c = eventArgs.get_keyCode();
            if (c == 13) {
                //prevent the Enter key execution
                eventArgs.set_cancel(true);
            }
        }
     
        function OnValueChanged(sender, eventArgs) {
            alert("the text has been modified: " + eventArgs.get_newValue());
        }
    </script>


    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Vasssek
    Vasssek avatar
    185 posts
    Member since:
    Aug 2010

    Posted 25 Jul 2018 in reply to Rumen Link to this post

    Hi,

    thank you for this suggestion. The question is how to fire OnValueChanged event straight from CancelNewLine function when enter was pressed and cancelled. Should I change focus to another control or it it possible to expose it directly through some method ?

    Regards

    Vasssek

  4. Answer
    Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 25 Jul 2018 Link to this post

    You are welcome!

    For example, you can call sender.blur(); to blur the component:

    <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" TextMode="MultiLine" Text="Some very long wrapped text on multiple lines">
        <ClientEvents OnKeyPress="CancelNewLine" OnValueChanged="OnValueChanged" />
    </telerik:RadTextBox>
    <script type="text/javascript">
        function CancelNewLine(sender, eventArgs) {
            var c = eventArgs.get_keyCode();
            if (c == 13) {
                //blue the textarea
                sender.blur();
                //cancel Enter key execution
                eventArgs.set_cancel(true);
            }
        }
     
        function OnValueChanged(sender, eventArgs) {
            alert("the text has been modified: " + eventArgs.get_newValue());
        }
    </script>


    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Vasssek
    Vasssek avatar
    185 posts
    Member since:
    Aug 2010

    Posted 25 Jul 2018 in reply to Rumen Link to this post

    Hello,

    perfect job, now it works as I need...

    Благодаря ти :-)

    Regards

    Vasssek

     

Back to Top