Ryan Lundy
Ryan Lundy

Reputation: 210150

Wrapping GridView text without a visible space

I have a GridView with several fields, one of which can potentially have a crazy wide value in it like this:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

If that sort of thing is in the field, I want it to wrap.

I can easily insert a character in code every 50 characters or so...but what character? If I use \r\n or a space or the like, then sometimes the setting doesn't wrap (because a different row's 50 chars is wider), and I get something like this:

mmmmmmmmmm
mmmmm
llllllllll llllllllll llll

I don't want those spaces to show up; I just want the line to wrap there if it can, but otherwise to show nothing:

mmmmmmmmmm
mmmmm
llllllllllllllllllllllll

Also, I'd rather leave HtmlEncode on if possible. Is there a way to do this?

Upvotes: 6

Views: 9507

Answers (4)

Mits
Mits

Reputation: 51

ItemStyle-Wrap="true" ItemStyle-Width="100" doesn't work for one long word with no space.

Found the solution:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    e.Row.Cells[1].Attributes.Add("style", "word-break:break-all;word-wrap:break-word");
                }
            }

where Cells[1] is the column you want to wrap.

Upvotes: 5

Seemal Asif
Seemal Asif

Reputation: 9

You can use the following template field properties in GridView

ItemStyle-Wrap="true" ItemStyle-Width="100"

You have to set the width, otherwise the text will not be wrapped.

Upvotes: 0

Matt Briggs
Matt Briggs

Reputation: 42208

stick these lines of CSS in a class, and stick that class in your grid items

white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap; /* CSS3 */ 
word-wrap: break-word; /* IE 5.5+ */

Upvotes: 4

Stephen Wrighton
Stephen Wrighton

Reputation: 37829

You can do a few things here.

One option is change the column in question to a TemplateColumn, and place a div in it, with the ability to generate scrollbars. I'd really suggest against this.

If you use a CRLF (\r\n) then you'd need to wrap it into PRE tags, and you'd want to change the font fact to a monospace font (such as Courier) so that 50 characters would ALWAYS be the same length.

If you want an HTML solution, then it's a matter of inserting a BR tag into the text at the appropriate place.

Now, you'd also want to ensure that you're checking the length of the string (making sure that it's greater than your magic number length), and that it doesn't contain a space (as a space will allow for wrapping), prior to inserting either the CRLF or the BR.

Upvotes: 0

Related Questions