By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,685 Members | 1,243 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Wrap the URL-Text in GridView

100+
P: 293
I heard about the problem people face in wrapping the text which pertains to the URL path in Gridview.

Here are the steps I investigated to wrap the text in GridView that pertains the URL

1) Define the style to wrap the url text as

<style type="text/css">
.WordWrap { width:100%;word-break : break-all }
</style>

2) Apply this CSS to the Div which is the container for the GridView

3) In addition, apply the Wrap=true at the Rowlevel as
<RowStyle Wrap="true" /> inside GridView

These simple three steps would help you to wrap the text which pertains the URLs.

Since this is an investigated solution , in case this doesnt work, please comment on to add-in value to the article.

With the above three steps in code, the column data that pertains to the URL gets wrapped.However the way it wraps the text is found to be inconsistent. For e.g. The text 'abcdefgh' upon wrapping is resulting into the 'abcdef' on line-1 and 'gh' onto the next line with no hyphenation in between.The value to the attribute word-break as 'Hyphenate' is pointing to no result.

Qualifying the CSS with the property "overflow-x"
having value as "auto" leads to the Horizontal scroll bar to the DataGrid.

I found that with this Horizontal scroll bar in place the text is getting wrapped consistently with no loss of data if overflow occurred.

So here is the go..

1) Define the style to wrap the url text as

<style type="text/css">
.WordWrap { width:100%;word-wrap: break-word;overflow-x :auto }
</style>

2) Apply this CSS to the Div which is the container for the GridView

In case this doesnt work, please comment on to add-in value to the article.
Jun 20 '12 #1
Share this Article
Share on Google+