New to Telerik UI for Blazor? Download free 30-day trial

Render Line Breaks in Grid Column


Product Grid for Blazor


This knowledge base article answers the following questions:

  • How do I display line breaks inside a Grid column?
  • Is it possible to render HTML inside a Grid column?


  1. To create a new line break in the HTML content of a Grid cell, replace the \n segment with the <br> HTML tag.
  2. To render the <br> HTML tag from a string, use a MarkupString.
  3. To define the MarkupString, use the column's Template.
<TelerikGrid Data="@GridData" Height="400px">
        <GridColumn Field="@(nameof(Item.Text))" Title="Test">
                    var item = (Item)context;

                    @(new MarkupString($"{item.Text.Replace("\n", "<br>")}"))
        <GridColumn Field="@(nameof(Item.Name))" />

@code {
    private IEnumerable<Item> GridData = Enumerable.Range(1, 10).Select(x => new Item
        Id = x,
        Name = "Item " + x,
        Text = "Test\nTest\nTest"

    public class Item
        public int Id { get; set; }
        public string Name { get; set; }
        public string Text { get; set; }

See Also

In this article