1. Home
  2. Forum
  3. Blazor
  4. How to show text field that has multiple lines

How to show text field that has multiple lines

Hi,

I am rendering a grid as below and the journal field will contain multiple lines of text - e.g.

Line 1
<blank line>
Line 3

but when the grid shows it shows as Line 1 Line 3.

How can I get it to retain the blank lines present in the field?

Thanks

<SfGrid DataSource="@claimJournalSummaries" class="col-md-12 table" AllowSorting="true" AllowTextWrap="true">
    <GridTextWrapSettings WrapMode="WrapMode.Content"></GridTextWrapSettings>
    <GridColumns>
        <GridColumn Field=@nameof(ClaimJournalSummary.EntryDateTime) HeaderText="Date" Format="dd/MM/yyyy HH:mm"></GridColumn>
        <GridColumn Field=@nameof(ClaimJournalSummary.UserName) HeaderText="Entry By"></GridColumn>
        <GridColumn Field=@nameof(ClaimJournalSummary.Journal) HeaderText="Journal"></GridColumn>
    </GridColumns>
</SfGrid>


5 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team June 17, 2020 12:33 PM UTC

Hi Robert, 

Greetings from Syncfusion. 

Query: I am rendering a grid as below and the journal field will contain multiple lines of text - e.g. 

We have validated your query and you want to show multiple line in Grid column cells. We suggest you to achieve your requirement by using DisableHtmlEncode property. Here, we have showed multiple lines in CustomerID column. Find the below code snippets and sample for your reference. 

 
<SfGrid DataSource="@Orders" Height="315"> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="<span> Order ID </span>" DisableHtmlEncode="false" TextAlign="TextAlign.Right" Width="140"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="<span> Customer ID </span>" DisableHtmlEncode="false" Width="120"></GridColumn> 
        . . . 
   </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    protected override void OnInitialized() 
    { 
        Orders = Enumerable.Range(1, 75).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
            CustomerID = (new string[] { "ALFKI <br /> From <br /> Tokyo", "ANANTR <br /> from <br /> German", "ANTON <br /> from <br />", "BLONP <br /> Oslo", "BOLID" })[new Random().Next(5)],   //datasource containing break tags 
            ShipCity = (new string[] { "Seattle", "Tacoma", "Redmond", "Kirkland", "London" })[new Random().Next(5)], 
            OrderDate = DateTime.Now.AddDays(-x), 
        }).ToList(); 
    } 
 
    . . . 
} 

[screenshot] 
 


Reference: 

Please get back to us if you need further assistance. 

Regards,
Rahul 
 


RO Robert June 17, 2020 07:05 PM UTC

Hi,

Thank you for the quick response - but in my example it is stored in the database as "Line 1" + Environment.NewLine + Environment.NewLine + "Line 3" so, it has no HTML encoding in it.  Is it possible to render as multiple lines or do I have to encode by replacing with "<BR/>" and then render to include HTML?

Kind regards

Rob

RN Rahul Narayanasamy Syncfusion Team June 18, 2020 10:55 AM UTC

Hi Robert, 

Thanks for the update. 

We have validated your query and we suggest you to use Column Template feature to achieve your requirement. Here, we have prepared a sample based on your requirement. Find the below code snippets and sample for your reference. 

 
<SfGrid DataSource="@Orders" Height="315"> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="<span> Order ID </span>" DisableHtmlEncode="false" TextAlign="TextAlign.Right" Width="140"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="<span> Customer ID </span>" DisableHtmlEncode="false" Width="120"> 
            <Template> 
                @{ 
                    var employee = (context as Order); 
                    string[] words = employee.CustomerID.Split(' ');   //here we have split the words 
 
                    foreach (var word in words) 
                    { 
                                <div> @word <br /></div>  //displayed multiple lines 
                    } 
                } 
            </Template> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="100"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="100"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    protected override void OnInitialized() 
    { 
        Orders = Enumerable.Range(1, 75).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
            CustomerID = (new string[] { "ALFKI from Tokyo", "ANANTR from German", "ANTON from Berlin", "BLONP Oslo", "BOLID" })[new Random().Next(5)], 
            ShipCity = (new string[] { "Seattle", "Tacoma", "Redmond", "Kirkland", "London" })[new Random().Next(5)], 
            OrderDate = DateTime.Now.AddDays(-x), 
        }).ToList(); 
    } 
 
    . . . 
} 

 


Based on your need, you can customize the values in column template 



Please get back to us if you need further assistance. 

Regards, 
Rahul 


Marked as answer
CE Coda Error Analysis February 23, 2023 06:45 PM UTC

Another thing you can do with the original data is transform it to HTML, so something like this in the model:


{

    ...
    var htmlValue = originalValue.Replace("\r\\ n", "
");
    // And if you want OS-agnostic returns add these:

    htmlValue = htmlValue.Replace("\r", "
");

    htmlValue = htmlValue.Replace("", "
");
    ...
}


Then, display the htmlValue in the SfGrid column with `DisableHtmlEncode="false"`.


(NOTE: The post editor on this website didn't display return/newline code above, so I had to add a space to show it... Third Replace has newline character in quotes.  Also I am replacing it with HTML break tag.)


NP Naveen Palanivel Syncfusion Team March 7, 2023 03:27 AM UTC


Hi coda,


Thanks for your suggestions


Regards,

Naveen Palanivel


Loader.
Up arrow icon