Wrap Text in a Gridview row

Posted on 2010-11-09
Last Modified: 2012-05-10
I have a field that I am binding into a gridview control which is very large ( it holds comments) and it can be vey long. How can I make that row column to auto wrap the text so it doesnt go across the screen, please see the attached file..


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        CellPadding="4" DataKeyNames="ID" DataSourceID="AccessDataSource1" 
        EnableModelValidation="True" Width="962px" AllowPaging="True" 
        ForeColor="Black" GridLines="Horizontal" 
        style="font-family: Arial, Helvetica, sans-serif" AllowSorting="True" 
        BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" w
        BorderWidth="1px" CssClass="GridColumn">
            <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                ReadOnly="True" SortExpression="ID" HeaderStyle-Width="80px" 
                ItemStyle-Width="80px" HeaderStyle-HorizontalAlign="Center" 
                ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="GridColumn">
            <asp:BoundField DataField="created" HeaderText="created" 
                SortExpression="created" HeaderStyle-HorizontalAlign="Center" 
                    ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="80px" 
                    ItemStyle-Width="80px" >
            <asp:BoundField DataField="submited by" HeaderText="submited by" 
                SortExpression="submited by" HeaderStyle-Width="80px" 
                ItemStyle-Width="80px" HeaderStyle-HorizontalAlign="Center" 
            <asp:BoundField DataField="preferred contact method" 
                HeaderText="preferred contact method" SortExpression="preferred contact method" 
                ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
            <asp:BoundField DataField="E-Mail" HeaderText="E-Mail" 
                SortExpression="E-Mail" HeaderStyle-Width="120px" ItemStyle-Width="120px" 
                ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
            <asp:BoundField DataField="Phone" HeaderText="Phone" 
                SortExpression="Phone" ItemStyle-HorizontalAlign="Center" 
                HeaderStyle-HorizontalAlign="Center" >
            <asp:BoundField DataField="Comments" HeaderText="Comments" 
                SortExpression="Comments" ItemStyle-HorizontalAlign="Left" 
                HeaderStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" 
            <asp:BoundField DataField="Status" HeaderText="Status" 
                SortExpression="Status" HeaderStyle-HorizontalAlign="Center" 
                    ItemStyle-HorizontalAlign="Center" >
            <EditRowStyle Wrap="True" />
        <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
        <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" Wrap="True" />
        <PagerStyle BackColor="White" ForeColor="Black" />
        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" 
                Wrap="True" />

Open in new window

Question by:TonyReba
  • 4
  • 4
LVL 29

Expert Comment

by:David H.H.Lee
ID: 34099063
Hi TonyReba,
You can apply wrap="true" in the applied column.
Check this fixed:

Author Comment

ID: 34099074
can you modify the above code?

I can't make it work!
LVL 29

Expert Comment

by:David H.H.Lee
ID: 34099105
Can you show the CSS code for "GridColumn"? I'm suspecting this has overridden the existing layout even you've turned on the text wrap property.

Author Comment

ID: 34099131
Is doing nothing, I tried applying into the grid view columns
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.


Author Comment

ID: 34099133
      white-space: pre-wrap; /* css-3 */
      white-space: pre-line;
      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;
LVL 29

Expert Comment

by:David H.H.Lee
ID: 34099575
Hi TonyReba,
It should be work as though if the user key in "Normal" comment instead of try to spam your comment section. At least i don't see any words that have such "Long" comment (non-stop with any space). In that case, you need to write custom code to detect and break it if you like to display this entered abnormal words into wrapped mode.

Author Comment

ID: 34101680
I think works on ie. But not in chrome??
LVL 29

Accepted Solution

David H.H.Lee earned 500 total points
ID: 34108635
Perhaps you can try jQuery plugin - .wrap() method to output the content.

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Class Library Dynamics For Connectstring Information 2 22
Registering DLL 5 43
Error in page 3 46
REReplaceNoCase help 1 16
Read about why website design really matters in today's demanding market.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now