Display/Edit RTF Text

[Jonah Coleman]

Is there a way to display RTF text, and use the RTF editor when in-line editing in the grid?  My attempts so far have been unsuccesful.

[Vignesh Natarajan]

HI Jonah,  

 

Greetings from Syncfusion support.  

 

Query: “Is there a way to display RTF text, and use the RTF editor when in-line editing in the grid?  My attempts so far have been unsuccesful.” 

 

You can display the RTF text in the Grid by disabling the encode (DisableHtmlEncode) property of GridColumn. And also you can render RTE editor while editing a record using EditTemplate feature of EjsGrid. Refer the below code example.  

 

<EjsGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridEvents OnActionBegin="OnBegin" TValue="Order"></GridEvents> 

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 

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

            <EditTemplate> 

                <EjsRichTextEditor @ref="@RTE" ID="CustomerID" Value="@((context as Order).CustomerID)" /> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" Width="160"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

 

public List<Order> Orders { get; set; }    public EjsRichTextEditor RTE { get; set; }    public void OnBegin(ActionEventArgs<Order> Args)    {        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)        {            Args.Data.CustomerID = RTE.Value;        }    }

 

 

 

To save the changes in Grid dataSource, we need to handle the values in OnActionBegin event of Grid. Refer above highlighted code example.  

 

Refer the below screenshot for the output 

 

 

 

While editing a record. 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/152088/ze/BlazorApp1-1775505193  

 

Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/cell/#displaying-the-html-content  

 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionbegin  

https://ej2.syncfusion.com/blazor/documentation/grid/editing/#cell-edit-template  

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan