How to wrap text in the boundfield of Gridview?

96.5k Views Asked by At

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>
3

There are 3 best solutions below

0
On

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>
0
On

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!

2
On

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" />