Solved

Wrap Text in a Gridview row asp.net

Posted on 2010-11-09
8
2,070 Views
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..

thanks

<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">
            <Columns>
            <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>
            <asp:BoundField DataField="created" HeaderText="created" 
                SortExpression="created" HeaderStyle-HorizontalAlign="Center" 
                    ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="80px" 
                    ItemStyle-Width="80px" >
                </asp:BoundField>
            <asp:BoundField DataField="submited by" HeaderText="submited by" 
                SortExpression="submited by" HeaderStyle-Width="80px" 
                ItemStyle-Width="80px" HeaderStyle-HorizontalAlign="Center" 
                ItemStyle-HorizontalAlign="Center">
            </asp:BoundField>
            <asp:BoundField DataField="preferred contact method" 
                HeaderText="preferred contact method" SortExpression="preferred contact method" 
                ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" >
            </asp:BoundField>
            <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>
            <asp:BoundField DataField="Phone" HeaderText="Phone" 
                SortExpression="Phone" ItemStyle-HorizontalAlign="Center" 
                HeaderStyle-HorizontalAlign="Center" >
            </asp:BoundField>
            <asp:BoundField DataField="Comments" HeaderText="Comments" 
                SortExpression="Comments" ItemStyle-HorizontalAlign="Left" 
                HeaderStyle-HorizontalAlign="Left" ItemStyle-Wrap="True" 
                    HeaderStyle-Wrap="True">
        
            </asp:BoundField>
            <asp:BoundField DataField="Status" HeaderText="Status" 
                SortExpression="Status" HeaderStyle-HorizontalAlign="Center" 
                    ItemStyle-HorizontalAlign="Center" >
                </asp:BoundField>
        </Columns>
            <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" />
    </asp:GridView>

Open in new window

Doc1sample.doc
0
Comment
Question by:TonyReba
  • 4
  • 4
8 Comments
 
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:
http://bit.ly/cLnAiD
0
 
LVL 9

Author Comment

by:TonyReba
ID: 34099074
can you modify the above code?

I can't make it work!
0
 
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.
0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 9

Author Comment

by:TonyReba
ID: 34099131
Is doing nothing, I tried applying into the grid view columns
0
 
LVL 9

Author Comment

by:TonyReba
ID: 34099133
.GridColumn
{
      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;
}
0
 
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.
0
 
LVL 9

Author Comment

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

Accepted Solution

by:
David H.H.Lee earned 500 total points
ID: 34108635
Perhaps you can try jQuery plugin - .wrap() method to output the content.
http://api.jquery.com/wrap/
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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