How to wrap text in the boundfield of Gridview?

Question

I have a table, in the table there are couple of buttons and a Gridview. I am trying to wrap the text in one of the boundfield of the Gridview.

I have tried to set the RowStyle Wrap="true" in the Gridview properties and set the ItemStyle Wrap="true" and the Width in the boundfield properties, but didn't work.

Following is my aspx.

<table align="center" border="0" cellpadding="0" cellspacing="2" >
    <tr>
        <td></td>
        <td align="right">
            <asp:Button ID="btnAdd" runat="server" Text="Add Subscription" 
                onclick="btnAdd_Click" CausesValidation="False" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <p align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px" >
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </p>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="2">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="SubscriptionID,UserID" 
                DataSourceID="SqlDSEmailSubscriptions" Width="90%" CellPadding="4" 
                EnableViewState="False" AllowPaging="True">
                <Columns>
                    <asp:TemplateField HeaderText="SubscriptionName" SortExpression="SubscriptionName">
                    <ItemTemplate>
                        <asp:LinkButton ID="lbtnSubscription" runat="server" CausesValidation="false" 
                        Text='<%# Eval("SubscriptionName")%>' OnClick="lbtnSubscription_Click">
                        </asp:LinkButton>
                    </ItemTemplate>
                    </asp:TemplateField> 

                    <asp:BoundField DataField="SubscriptionName" HeaderText="SubscriptionName" 
                        SortExpression="SubscriptionName" Visible="false" />

                    <asp:BoundField DataField="SubscriptionID" HeaderText="SubscriptionID" 
                        ReadOnly="True" SortExpression="SubscriptionID" />
                    <asp:BoundField DataField="ProductList" HeaderText="ProductList" 
                        SortExpression="ProductList" />
                    <asp:BoundField DataField="DivisionList" HeaderText="DivisionList" 
                        SortExpression="DivisionList" />
                    <asp:BoundField DataField="DisciplineList" HeaderText="DisciplineList" 
                        SortExpression="DisciplineList" />
                    <asp:BoundField DataField="UserID" HeaderText="UserID" ReadOnly="True" 
                        SortExpression="UserID" Visible="false" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDSEmailSubscriptions" runat="server" 
                ConnectionString="<%$ ConnectionStrings:SPRConnectionString %>" 

                SelectCommand="SELECT [SubscriptionID], [SubscriptionName], [ProductList], [DivisionList], [DisciplineList], [UserID] FROM [sprEmailSubscriptions] WHERE ([UserID] = @UserID) ORDER BY [SubscriptionName]">
                <SelectParameters>
                    <asp:SessionParameter Name="UserID" SessionField="userID" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>
        </td>
    </tr>
</table>

Can you update the markup above to exactly depict the column which you want to be wrapped and also the styles that you have applied? Thanks. — Vaibhav, Nov 05 '11 at 06:43
It is always recommended to specify widths for columns requiring text wrapping. A similar question exists: https://stackoverflow.com/questions/4029875/how-to-wrap-text-in-boundfield-column-in-gridview You may also try the following: [Gridview text not wrapping in IE8](http://social.msdn.microsoft.com/Forums/en-CA/netfxjscript/thread/49d3ecf2-688e-4a4c-99c2-5feb39ed8871) Hope it helps! — Vaibhav, Nov 05 '11 at 06:35

score 12 · Answer 1 · edited Apr 29 '13 at 13:50

Wrapping text in a gridview column having fixed length.

First make the column in gridview, where text is to be wrapped as ItemTemplate.

This can be done by:

Select gridview—smart tag > edit column
Select the column from bottom left box titled as Selectedfields
Click on “Convert this field into TemplateField” > OK

In source you will see the following code:

<asp:TemplateField HeaderText="name" SortExpression="name">
    <EditItemTemplate>
       <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("name")%>'></asp:TextBox>
    </EditItemTemplate>

    <ItemTemplate>
       <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Give width limit to the column in pixels as :

<ItemTemplate>
  <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>' Width="200px"></asp:Label>
</ItemTemplate>

Now styles are to be added:

If wrapping of text in column is to be applied to all columns or entire grid view then write following code in page_load() event:

protected void Page_Load(object sender, EventArgs e)
{
    GridView1.Attributes.Add("style", "word-break:break-all; word-wrap:break-word");    
}

If wrapping of text in column is to be applied only to a particular column of grid view then write following code in GridView1_RowDataBound() event:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[0].Attributes.Add("style", "word-break:break-all;word-wrap:break-word;");
    }
}

Check the cell number of the gridview.

Work Done!

score 4 · Answer 2 · answered Dec 11 '14 at 14:08

Using a Div in Item Template Works Gr8

 <ItemTemplate>
                            <div style="word-wrap: break-word; width: 530px;>
                                <asp:Label ID="lblTermName" runat="server" Text='<%# Eval("TermName") %>' />
                            </div>
                        </ItemTemplate>

score 1 · Answer 3 · answered Nov 02 '12 at 12:19

1

Yes, you can parse it by every "x" caracters, but maybe it is better solution to put into header of columns to be fixed size and define wrap "true".

by that option you'll get same gridview size every time and better and more clearly user interface.

Use code:

<asp:BoundField DataField:="Your_data_field" HeaderText="Your_text" sordExpression="Your_sort_expression" ItemStyle-wrap="true" ItemStyle-with="50" />

answered Nov 02 '12 at 12:19

SeniB

61
1

-wrap works but -with does not worked – Shriram Panchal Mar 04 '17 at 12:32
Try ItemStyle-Width="50" – Dick Bos Apr 20 '20 at 12:46

How to wrap text in the boundfield of Gridview?

3 Answers3