Solved

Wrap Text in a Gridview row asp.net

Posted on 2010-11-09
8
2,048 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
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:
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

839 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