Making an ASP.Net GridView column a fixed size and do word wrapping

Question

In an ASP.Net web form there is a GridView. We want to have a fixed size for 1 of the columns in this GridView and have the text in it also do word wrapping. We can't get it to work.

Here is the markup I have tried:

<asp:BoundField DataField="AssignmentDetails" HeaderText="Assignment" 
    SortExpression="AssignmentDetails" ItemStyle-Width="20" ItemStyle-Wrap="true">

    <HeaderStyle HorizontalAlign="Left" />
    <ItemStyle HorizontalAlign="Left" />
</asp:BoundField>

We thought that this would make the column 20 characters wide and make the words wrap but it doesn't do that.

* Update *

It's now working based on Darren's coding sample. Here is the full markup of the GridView and the code-behind using his technique:

        <asp:GridView
            ID="GridViewSummary" 
            runat="server" 
            AllowSorting="True" 
            AutoGenerateColumns="False" 
            DataKeyNames="ID" 
            Width="691px" 
            AllowPaging="True"
            PageSize="5"
            OnRowDataBound="GridViewSummary_RowDataBound">

            <Columns>
                <asp:BoundField DataField="AssignmentDate" HeaderText="Date" 
                    SortExpression="AssignmentDate" DataFormatString="{0:MM/dd/yyyy}">

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:BoundField>

                <asp:BoundField DataField="AssignmentDueDate" HeaderText="Date Due" 
                    SortExpression="AssignmentDueDate" DataFormatString="{0:MM/dd/yyyy}">

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:BoundField>

                <asp:BoundField DataField="Class" HeaderText="Class" 
                    SortExpression="Class">

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:BoundField>

                <asp:BoundField DataField="TeacherName" HeaderText="Teacher" 
                    SortExpression="TeacherName">

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:BoundField>

                <asp:TemplateField HeaderText="Assignment" SortExpression="AssignmentDetails">
                    <ItemTemplate>
                        <asp:Label ID="LabelAssignment" runat="server" Text='<%# Bind("AssignmentDetails") %>'></asp:Label>
                    </ItemTemplate>

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" Wrap="True" />
                </asp:TemplateField>

                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:Button 
                            ID="ButtonSelect" 
                            runat="server" 
                            CausesValidation="False" 
                            CommandName="Select" 
                            Text="Select Assignment Details" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Code-behind:

Protected Sub GridViewSummary_RowDataBound(sender As Object, e As GridViewRowEventArgs)

    ' Deal with Data type rows, and not headers etc.
    '-----------------------------------------------
    If (e.Row.RowType = DataControlRowType.DataRow) Then

        Dim lblAssignment As Label = e.Row.FindControl("LabelAssignment")

        ' Call a recursive method and insert a line break every 20 chars.
        '----------------------------------------------------------------
        lblAssignment.Text = InsertlineBreak(lblAssignment.Text)
    End If
End Sub

Function InsertlineBreak(ByVal original As String) As String

    Dim MaxStringLength As Int16 = 20

    If original.Length > MaxStringLength Then
        Dim indexOfSpace = original.IndexOf(" ", MaxStringLength - 1)
        If indexOfSpace <> -1 AndAlso indexOfSpace <> original.Length - 1 Then
            Dim firstString As String = original.Substring(0, indexOfSpace)
            Dim secondString As String = original.Substring(indexOfSpace)

            Return firstString & "<br/>" & InsertlineBreak(secondString)
        Else
            Return original
        End If
    Else
        Return original
    End If
End Function

I also applied this technique to our DetailsView as well as shown in this markup and code-behind:

                <asp:TemplateField HeaderText="Details:" SortExpression="AssignmentDetails">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBoxAssignmentDetails" runat="server" Text='<%# Bind("AssignmentDetails") %>' TextMode="MultiLine"
                            rows="5"></asp:TextBox>
                    </EditItemTemplate>

                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBoxAssignmentDetails" runat="server" Text='<%# Bind("AssignmentDetails") %>' TextMode="MultiLine"
                            rows="5"></asp:TextBox>
                    </InsertItemTemplate>

                    <ItemTemplate>
                        <asp:Label 
                            ID="LabelAssignmentDetails" 
                            runat="server" 
                            Text='<%# Bind("AssignmentDetails") %> '
                            OnDataBinding="LabelAssignmentDetails_DataBinding">
                        </asp:Label>
                    </ItemTemplate>

                    <ItemStyle ForeColor="Blue" />
                </asp:TemplateField>

Code-behind:

Protected Sub LabelAssignmentDetails_DataBinding(sender As Object, e As EventArgs)

    Dim lblAssignment As Label = DetailsView.FindControl("LabelAssignmentDetails")

    ' Call a recursive method and insert a line break every 20 chars.
    '----------------------------------------------------------------
    lblAssignment.Text = InsertlineBreak(lblAssignment.Text)
End Sub

Answer 1

Ok, so item width won't work as it's pixel based, not character based as Jason states.

you need to handle this on the RowDataBound event for each row in your grid.

this example is in VB, though converting it to C# won't be too hard for you i'm sure.

In your codebehind do something like this - replace "MyGridView" with the name of your grid.

First off, change your bound field to a template field; much easier to control.. and in that template put a Literal that will hold your text, call this MyLit for this example

Private Sub MyGridView(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles MyGridView.RowDataBound
        '' only want to deal with Data type rows, and not headers etc
        If (e.Row.RowType = DataControlRowType.DataRow) Then

             '' get this instance of the object you're binding (assuming object is Assignment)
             Dim assignment As Assignment = CType(e.Row.DataItem, Assignment)
             '' now get the literal control where you will be putting your text
            Dim MyLit as Literal = row.FindControl("MyLit")

            '' you can now call a recursive method and insert a line break every 20 chars
            MyLit.Text = InsertlineBreak(assignment.TextToSplitUp)

        End If

End Sub


 Function InsertlineBreak(ByVal original As String) As String
        Dim MaxStringLength As Int16 = 20

        If original.Length > MaxStringLength Then
            Dim indexOfSpace = original.IndexOf(" ", MaxStringLength - 1)
            If indexOfSpace <> -1 AndAlso indexOfSpace <> original.Length - 1 Then
                Dim firstString As String = original.Substring(0, indexOfSpace)
                Dim secondString As String = original.Substring(indexOfSpace)

                Return firstString & Chr(10) & InsertlineBreak(secondString)
            Else
                Return original
            End If
        Else
            Return original
        End If
    End Function

I haven't tested this code - I have just knocked it up for example, though it will give you an idea on how to proceed. Please don't just copy/paste and then comment that it doesn't work right out of the box. More would need to be know to give an exact working example. :)

Answer 2

Set ItemStyle-CssClass="WrappedText", and in CSS do:

.WrappedText
{
  word-break: break-all;
  word-wrap: break-word;
}

Answer 3

ItemStyle-Width sets the pixel width of the column, not the number of characters. If the content can't be wrapped in 20 pixels, it would expand the column.