Setting GridView header text to wrap as directed.

Question

I have a GridView that has columns such as:

|    A    |    B C    |    D E / F   |

I want these to be wrapped in a particular way - that is, I do not want to leave it up to the browser to work out whether to wrap or not depending on the column width. So in the above example I may want the following:

|    A    |    B      |    D         |
|         |    C      |    E / F     |

I have tried using \n and also using <br/> however both of these did not work.

Any ideas?

Answer 1

If you use a template field, you can have fine grain control the header content in the header template:

<asp:templatefield>
    <headertemplate>
      D<br />
      E / F
    </headertemplate>
    <itemtemplate>
        <%#Eval("MyField")%>
    </itemtemplate>
</asp:templatefield>

Answer 2

You can do it without templates. Just set HtmlEncode="False" on the headers with <br /> tags in them.

Example:

<asp:GridView ID="GridView1" runat="server" DataSourceID="Data">
<Columns>
    <asp:BoundField HeaderText="First Line<br />Second Line" DataField="ContactID"
                HtmlEncode="False" />
    <asp:BoundField HeaderText="Second" DataField="FirstName" />
    <asp:BoundField HeaderText="Third<br />Extra" DataField="Title" />
</Columns>
</asp:GridView>

Renders:

First Line  |   Second  |  Third<br />Extra |
Second Line |           |                   |
---------------------------------------------
1           | Gustavo   | Mr.               |
---------------------------------------------
2           | Catherine | Ms.               |
---------------------------------------------

NOTE: If you use the Designer rather than editing the aspx directly, it will change your "<" into "<" when you click OK.