multiline textbox in grid

[DAN]

dear Support,

we need to display new lines (paragraphs)( like it is in multiline textox ) in one of our datagrid colum (Phrase)

we arleady enable   AllowTextWrap="true" in our grid which works, but the problem is, it does not show the new lines in the text.when we edit the text in a multiline textbox it displays fine.

here is our grid code. can you please provide a working code/ OR sample  for the above requiremnt?

thank you

 @{

                        List<Syncfusion.Blazor.Navigations.ItemModel> Toolbaritems3 = new List<Syncfusion.Blazor.Navigations.ItemModel>();

                        Toolbaritems3.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "add Phrase", Id = "add", TooltipText = "add", PrefixIcon = "e-add_new" });

                    }

                    <SfGrid RowHeight="25" @ref="GridnametemplatereportDetails" AllowTextWrap="true" Toolbar="Toolbaritems3" DataSource="@TemplateReportDetailObjects" AllowPaging="false" EnableVirtualization="true" AllowSorting="false" AllowFiltering="false" Height="900px">

                        <GridEvents OnToolbarClick="ToolbarClickHandler3" TValue="Model.TemplateReportDetail" RowDataBound="RowBoundColorIt"></GridEvents>

                        <GridTextWrapSettings WrapMode="WrapMode.Content"></GridTextWrapSettings>

                        <GridSortSettings>

                            <GridSortColumns>

                                <GridSortColumn Field="PhraseSortOrder" Direction="SortDirection.Ascending"></GridSortColumn>

                            </GridSortColumns>

                        </GridSortSettings>

                        <GridPageSettings PageSize="50"></GridPageSettings>

                        <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="50"></GridFilterSettings>

                        <GridColumns>

                            <GridColumn HeaderText="" TextAlign="TextAlign.Left" AutoFit="true">

                                <Template>

                                    @{

                                        var data = (context as MyApp.Model.TemplateReportDetail);

                                        <a @onclick="(args => (editRow3(data)))"><i class="e-icons e-edit" style="margin-left:3px;"></i></a>

                                        <a @onclick="(args => (deleteRow3(data)))"><i class="e-icons e-delete" style="margin-left:3px;"></i></a>

                                    }

                                </Template>

                            </GridColumn>

                            <GridColumn Field=@nameof(MyApp.Model.TemplateReportDetail.Phrase) HeaderText="Phrase" TextAlign="TextAlign.Left" FilterSettings="@(new FilterSettings { Operator = Operator.Contains })"> </GridColumn>

                            <GridColumn Visible="false" Field=@nameof(MyApp.Model.TemplateReportDetail.PhraseSortOrder) HeaderText="PhraseSort Oder" TextAlign="TextAlign.Left" AllowEditing="false" AllowFiltering="false"></GridColumn>

                            <GridColumn Visible="false" Field=@nameof(MyApp.Model.TemplateReportDetail.Id) HeaderText="dbid" TextAlign="TextAlign.Left" IsIdentity="true" IsPrimaryKey="true" AutoFit="true" FilterSettings="@(new FilterSettings { Operator = Operator.Equal })"></GridColumn>

                        </GridColumns>

                    </SfGrid>

[Renjith Singh Rajendran]

Hi Danil, 

Greetings from Syncfusion support. 

By default, the AllowTextWrap feature will wrap the contents of the Grid’s cell when the Grid cell’s content gets exceeded. This is the default behavior of AutoWrap feature. 

Reference : https://blazor.syncfusion.com/documentation/datagrid/cell#auto-wrap 

Based on your scenario, we suggest you to use the Column Template feature and customize your Grid cell’s display based on your requirement. We have prepared a sample having a column with new line text value. We have displayed this new line text in Grid using Column Template feature. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1706814556 

Reference : https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

Please refer the codes below, 

 

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"> 

    <Template> 

        @{ 

            string modifiedstring = Regex.Replace((context as Order).CustomerID, @"(\r\n)|\n|\r", "<br/>"); 

            MarkupString FormattedString = (MarkupString)modifiedstring; 

            <div>@FormattedString</div> 

        } 

    </Template> 

</GridColumn> 

Please refer the screenshot below, 

 

If you are still facing difficulties, kindly get back to us with a detailed explanation of the reported problem along with a simple sample(based on your scenario) and video demo to proceed further. Please get back to us if you need further assistance. 

Regards, 

Renjith R