RadTextBox Multiline and wrap issue

1 Answer 213 Views
Input
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Johnny asked on 04 Nov 2022, 09:05 AM

Hello there!

I've got a DAT file that I am trying to display its content in a RadTextBox. 

I've done that, however the problem is the formatting. I will be sharing screenshots of how I want it to be formatted and how it is actually formatting it. I've spent a few hours looking with no results therefore I hope a way exits to do this.

The image DatFile.png contains a screenshot of how my file looks like, with vertical and horizontal scrollbars to keep the text formatted in a readable way and only wrapping the text when the line is finished. If the line is too long, an horizontal scroll allows you to navigate and see the rest of the line without actually wrapping it to a new line and making it very hard to read.

The image code.png contains a screenshot of how it is being formatted in my RadTextBox.

The code below is the code of the RadTextBox on my aspx page

<telerik:RadTextBox ID="RadTextBox1" Runat="server" ReadOnly="True" TextMode="MultiLine" Resize="Both" Text='<%# Eval("FichierGrtn") %>' Width="1750px" Height="800px">
</telerik:RadTextBox>

After inserting the code above, I have just realized that the text box you guys used to insert the colored code is exactly the same thing I want for my text box to behave. I have included a screenshot for that as well under the name of "forums.png".

Please check all the attached screenshots in order to have a better idea regarding the problem I'm facing.

Thank you!

1 Answer, 1 is accepted

Sort by
1
Accepted
Doncho
Telerik team
answered on 09 Nov 2022, 08:20 AM

Hi Johnny,

When RadTextBox is used with its TextMode property set to MultiLine, the control renders <textarea> element in the DOM. You can use some custom CSS to override the default styling of that textarea in any desired manner.

With the current requirement, you can try overriding the white-space style rule and set it to be "pre", check out this StackOverflow thread - HTML Textarea horizontal scroll.

Here is an approach you can try:

<style>
    html body .RadInput .preformattedTextarea {
        white-space: pre;
    }
</style>

<telerik:RadTextBox ID="RadTextBox1" runat="server" ReadOnly="True" TextMode="MultiLine" Resize="Both" Text='<%# Eval("FichierGrtn") %>' Width="1750px" Height="800px" CssClass="preformattedTextarea">
</telerik:RadTextBox>

Please give it a try and let me know how it goes.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
commented on 09 Nov 2022, 08:55 AM

Hi Doncho,

Thanks a lot, it works perfectly! the radtextbox is now formatted exactly like it should be, similar to the screenshots in my original post above.

Have a nice day ahead!

Tags
Input
Asked by
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Answers by
Doncho
Telerik team
Share this question
or