ASP.NET 2.0 Autowrapping in GridView - Is that possible?
I was investigating on this couple of minutes ago. Before I start, thanks to Feelite for sharing your view on this in MSN Messenger. He recommended me to use CSS but it did bring me to somewhere.
I will explain further.
I will start my investigation from the very start.
Let’s assume you have such data that you had retrieved from the database.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa | bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb |
So what do you see here? All the data from both columns are stick together in 1 word.
Question: Can this be auto wrapped in GridView by default?
Answer: No. It will not be auto wrapped for this case. However …
If you have such data
Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccc dddddddddddddddd | bbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbb |
As you see in column one, there are 4 long words (each representing an alphabet). It will be auto wrapped.
Question: That doesn’t answer what I really want to achieve here?
Answer: Hold on J
Honestly speaking, I can’t really find a way to solve this within GridView capabilities. However getting some feedback from Feelite, using CSS is more suitable for this scenario. After all CSS is more suitable for visualizing your data. Stop thinking too far of building your custom GridView for this.
So Feelite recommended using this CSS attribute:
word-wrap: break-word;
When I typed that line of code in CSS editor part of Visual Studio 2005, you will be surprise that line of code will be underlined in red. When you mouse over to it, you will see this “word-wrap is not a known CSS property”.
Be calm. Actually it works fine in the browser. Just ignore it probably Visual Studio 2005 is a bit sensitive. When you research further online, you will find out that word-wrap only works on Internet Explorer 5.5 and onwards. I am working on Internet Explorer 7 and it works fine.
So let’s hands on and make this to happen.
Create a CSS file named “SgDotNet.css” (well I am advertising SgDotNet :P)
Type this code in this file
td
{
word-wrap: break-word;
}
In your ASP.NET 2.0 html code, type this:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Number" HeaderText="Number" />
</Columns>
</asp:GridView>
In your code behind, do this:
DataTable dTable = new DataTable("Test");
dTable.Columns.Add("Name");
dTable.Columns.Add("Number");
dTable.Rows.Add("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbb");
dTable.Rows.Add("ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc", "dddddddddddddddddddddddddddddddddddddddbbbbbbbbbbbbbbbbbbbbbbbccc
cccccccccccccbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdddd");
GridView1.DataSource = dTable;
GridView1.DataBind();
Take note, you can do anything on the DataBinding. Up to your creativity to simulate this.
Nothing fancy here.
Okay let get it straight. Why I code td inside my CSS file as a GridView is actually a table during runtime. Try to view source at your web application and you will know what I mean. If you decide to create a special CSS Class for this, it is possible also.
When you run this, guess what you will see?
No way. It doesn’t wrap at all. That is very weird. It is suppose to work. Weird.
Then I think maybe I did not set the width=”100%” in my GridView property. Let’s do it now.
<asp:GridView ID="GridView1" Width="100%" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Number" HeaderText="Number" />
</Columns>
</asp:GridView>
Okay fine. No difference yet.
Maybe I need to think out of the box, and set the width 100% in my table CSS attribute
table
{
width: 100%;
}
Nope. It doesn’t work. Some even recommended me to do this.
table
{
width: 99%;
}
Nope. It doesn’t work.
So what is the work around for this.
Let’s do some magic here.
Try this:
table
{
table-layout:fixed;
}
Yes. That is the key for everything. You must set the table-layout: fixed attribute. Without this, you will keep see the horizontal scrollbar problem. Yikes.
Okay before I end this with a conclusion, I will recommend you to do this:
For your td element, do this instead of just having word-wrap attribute.
td
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
You can research more online on the supported browsers. The 5 above should be sufficient for your needs.
Conclusion:
a) Make sure you have set the table-layout attribute at the table level. You cannot do this:
td
{
table-layout:fixed;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
It won’t work.
b) Even though word-wrap is an unknown property in Visual Studio 2005, in reality it works just fine.
c) GridView is just a table on runtime.
d) Use CSS to do this auto wrapping thing. You can of course write a super magic code to wrap your codes in the RowDataBound event of your GridView. But let’s think of simplistic.
e) With table-layout, it is possible to make it work even your GridView width is only 70%. It doesn't matter on what size you have? Try it :) I tested on 70% and 100%.
So it is possible to achieve auto wrapping for my scenario on top. Let me know if you have further doubts.
Thanks.