RadEditor will not render HTML within RadGrid

[Rengo]

Hello,

I have a RadEditor within a RadGrid and I am able to successfully save the properly formed html to a SQL Server database.  Although, when I try to display the content back into the RadEditor, it will not render the html.

The following is the RadEditor within the RadGrid:
<telerik:RadGrid ID="grdInstructions" runat="server" AutoGenerateColumns="false" Width="600px" onitemdatabound="grdInstructions_ItemDataBound"
                    ondeletecommand="grdInstructions_DeleteCommand" ClientSettings-Scrolling-UseStaticHeaders="true" ClientSettings-ClientEvents-OnGridCreated="onGridCreated"
                    ClientSettings-Scrolling-AllowScroll="true">
             <MasterTableView>
             <Columns>
               <telerik:GridBoundColumn HeaderText="Ref#" DataField="ReferenceNumber" UniqueName="ReferenceNumber"
                                     HeaderStyle-HorizontalAlign="Center" ItemStyle-Wrap="false" HeaderStyle-Width="30px">
               </telerik:GridBoundColumn>
               <telerik:GridTemplateColumn HeaderText="Instructions" UniqueName="Instructions" HeaderStyle-HorizontalAlign="Center"  HeaderStyle-Width="480px" HeaderStyle-BorderStyle="Groove" ItemStyle-Wrap="false">
                <ItemTemplate>
                    <telerik:RadEditor ID="txtInstruction" runat="server" MaxTextLength="1000" AutoResizeHeight="false" EditModes="Design" ContentAreaMode="Div" ToolbarMode="ShowOnFocus" EnableTextareaMode="true" Width="480px" Height="50px" ToolsWidth="130px">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool  Name="ForeColor" />
                            <telerik:EditorTool Name="Bold" />
                            <telerik:EditorTool Name="Italic" />
                            <telerik:EditorTool Name="Underline" />
                        </telerik:EditorToolGroup>
                    </Tools>
                    </telerik:RadEditor>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ButtonType="LinkButton" CommandName="Delete" ItemStyle-HorizontalAlign="Center"
                Text="Delete" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="60px"
                UniqueName="btnDeleteInstructionRow" Resizable="false">
            </telerik:GridButtonColumn>
             </Columns>
             </MasterTableView>
            </telerik:RadGrid>

I am displaying the content back to the RadEditor with the following code:
 protected void grdInstructions_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
            {
                //  Current row object.
                ESPTProjectInstruction projectInstruction = (ESPTProjectInstruction)e.Item.DataItem;
                string referenceNumber = string.Empty;

                //  Row Number
                GridDataItem dataItem = (GridDataItem)e.Item;
                referenceNumber = Convert.ToString(e.Item.ItemIndex + 1);
                dataItem["ReferenceNumber"].Text = referenceNumber;

                //  Project Instruction
                RadEditor txtInstruction = e.Item.FindControl("txtInstruction") as RadEditor;
                txtInstruction.Content = projectInstruction.Instruction;

                //  Delete Column               
                GridDataItem item = e.Item as GridDataItem;
                //  Display Delete option when adding new record and if there is more then one row.
                if (grdInstructions.MasterTableView.Items.Count > 0)
                {
                    //  Show Delete column during Add.
                    item["btnDeleteInstructionRow"].Controls[0].Visible = true;
                    item["btnDeleteInstructionRow"].Attributes["onclick"] = "return confirm('Delete Instruction# " +  referenceNumber + "?')";
                }
                else
                {
                    //  Hide Delete option if there is only one row.
                    item["btnDeleteInstructionRow"].Controls[0].Visible = false;
                }
            }
        }

This is how the data is stored in SQL Server:
<span style="color: #00b050;">This is the first instruction that is formatted green.</span>
<span style="color: #ff0000;"><strong>This is the second instruction that is formatted red and bolded.</strong></span>

How do I get the content to properly render the HTML in the RadEditor when it is retrieved from SQL Server?

Hopefully, someone out their can respond quickly....

Thank You in Advance!

[Rengo]

Hello Telerik,

Can someone please provide some support on this issue?

Thank You!

[Slav]

Hello Robert,

Note that setting the property EnableTextareaMode to true will render the editor as a simple textarea, which offers only plain text support. Please provide more detailed information about the way you want to represent your content. If possible you can demonstrate the desired effect with screenshots.

If you are having difficulties with saving and loading the RadEditor content from a database, you can check the online demo Editor - Save in Database.

All the best,
Slav
the Telerik team

[Rengo]

Thank You Slav!  That is exactly what I was looking for.

[Matt]

This breaks the appearance of the grid itself... see the pictures.

[Rumen]

Hello,

Can you send the whole RadEditor declaration since the error2ef16df3007624b629da36e5fb29b5648.png screenshot shows only the EnableTextareaMode but not the component /grid column type?

What I can see in the error5153e4536a1f4522bb22fa2a87711b00.png that editor is rendered with its toolbar while in text area mode it should not have a toolbar. Only a textarea should be rendered.

Regards,
Rumen
Progress Telerik