Always Get Better

Replacing / Adding Line Breaks in GridView Text

The GridView is a powerful control for quickly and easily displaying tables of data. However, a raw dump of information is not always good – when displayed by a web browser, normal line breaks are simply rendered as spaces.

For long blocks of text, it may be desirable to have your GridView insert HTML line breaks into your data. This can be accomplished either programatically or declaratively.

Programatically

As a programmer, my first instinct is to try to solve the problem using code behind. I add a RowDataBound event handler to my GridView and create the command this way:

protected void gvMessageList_RowDataBound(object sender, GridViewRowEventArgs e)
{
GridViewRow row = e.Row;
if (e.Row.RowType == DataControlRowType.DataRow)
{
row.Cells[2].Text = row.Cells[2].Text.Replace("\n", "<br />");
}
}

Although it works, it has several drawbacks:

  • This solution uses a magic number to cause the compiler to replace the third column in the row.  If the structure of the GridView were to change, this function may break
  • This solution requires the developer to be aware of the final layout of the GridView and to make the connection between the control’s declaration and its logical code.

Use The Design

By far, the better solution is to simply declare the formatting changes in the same place as the GridView.  Using a Template field, I can add line breaks to my message by adding this:

<%# Eval(“Message”).ToString().Replace(“\n”, “<br />”) %>

More Information

This solution assumes the contents of “Message” are not null.  For more information about this technique (including how to deal with null values), I recommend the ASP.NET message boards: http://forums.asp.net/p/1027728/1403884.aspx

Tags: , ,

8 Responses to “Replacing / Adding Line Breaks in GridView Text”

  1. Jill Atkins says:

    This does not work for me, no errors, just doesn’t display the line breaks.

  2. someone "anonymous" says:

    The guy who wrote this article is a moron.

  3. Mike says:

    I try to post all of the comments I get, so if you’d like to provide a link to a better resource (your own perhaps?), I’d be happy to put it up in order to help out anyone who might be reading this article.

  4. Chris says:

    Not to comment on a really old article, but there is a reason this doesn’t work, it’s because of this line:

    row.Cells[2].Text = row.Cells[2].Text.Replace(“\n”, “”);

    That should read:

    row.Cells[2].Text = row.Cells[2].Text.Replace(“\n”, “”);

    So thanks Mike, you did point me in the right direction, the thing is you were replacing the new lines with just an empty string, which is why it didn’t work. Changing it to will cause the newlines that are stored in the database to appropriately break now in the GridView.

    This is just for someone else that stumbles upon this article sometime 🙂

  5. Chris says:

    Ahh no wonder, it’s stripping the HTML tag, I see that now in my above comment. You should be replacing the \n with a tag, hopefully comes through this time

  6. Chris says:

    blah, still not coming through. Anyways, replace it with the break tag in HTML and it will work. This is why this article is confusing lol

  7. Mike says:

    Thanks Chris, I’ve updated my example to be more clear.

    I think the reason I left the first one in an unworkable state was to discourage people from using it, because it’s a pretty bad practice.

  8. Mike says:

    Either that, or WordPress actually DID strip out the HTML on me. It wouldn’t be the first time. A long time after this article was written, I switched to Github Gists for source code display.

    Looks like it’s time to go back and do some cleanup!

Leave a Reply