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

[Vasssek]

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

[Rumen]

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

[Vasssek]

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

[Rumen]

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

[Vasssek]

Hello,

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

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

Regards

Vasssek