This is a migrated thread and some comments may be shown as answers.
RadEditor will not render HTML within RadGrid
5 Answers 67 Views
This is a migrated thread and some comments may be shown as answers.
Rengo
Top achievements
Rank 1
Rengo asked on 08 Apr 2013, 07:05 PM
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!

5 Answers, 1 is accepted

Sort by
0
Rengo
Top achievements
Rank 1
answered on 11 Apr 2013, 02:01 PM
Hello Telerik,

Can someone please provide some support on this issue?

Thank You!
0
Accepted
Slav
Telerik team
answered on 11 Apr 2013, 03:24 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Rengo
Top achievements
Rank 1
answered on 11 Apr 2013, 03:36 PM
Thank You Slav!  That is exactly what I was looking for.
0
Matt
Top achievements
Rank 1
answered on 26 Nov 2019, 05:47 PM

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

0
Rumen
Telerik team
answered on 28 Nov 2019, 10:56 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Rengo
Top achievements
Rank 1
Answers by
Rengo
Top achievements
Rank 1
Slav
Telerik team
Matt
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or