RadEditor will not render HTML within RadGrid

6 posts, 1 answers
  1. Rengo
    Rengo avatar
    25 posts
    Member since:
    Nov 2012

    Posted 08 Apr 2013 Link to this post


    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"
                   <telerik:GridBoundColumn HeaderText="Ref#" DataField="ReferenceNumber" UniqueName="ReferenceNumber"
                                         HeaderStyle-HorizontalAlign="Center" ItemStyle-Wrap="false" HeaderStyle-Width="30px">
                   <telerik:GridTemplateColumn HeaderText="Instructions" UniqueName="Instructions" HeaderStyle-HorizontalAlign="Center"  HeaderStyle-Width="480px" HeaderStyle-BorderStyle="Groove" ItemStyle-Wrap="false">
                        <telerik:RadEditor ID="txtInstruction" runat="server" MaxTextLength="1000" AutoResizeHeight="false" EditModes="Design" ContentAreaMode="Div" ToolbarMode="ShowOnFocus" EnableTextareaMode="true" Width="480px" Height="50px" ToolsWidth="130px">
                                <telerik:EditorTool  Name="ForeColor" />
                                <telerik:EditorTool Name="Bold" />
                                <telerik:EditorTool Name="Italic" />
                                <telerik:EditorTool Name="Underline" />
                <telerik:GridButtonColumn ButtonType="LinkButton" CommandName="Delete" ItemStyle-HorizontalAlign="Center"
                    Text="Delete" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="60px"
                    UniqueName="btnDeleteInstructionRow" Resizable="false">

    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 + "?')";
                        //  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!
  2. Rengo
    Rengo avatar
    25 posts
    Member since:
    Nov 2012

    Posted 11 Apr 2013 Link to this post

    Hello Telerik,

    Can someone please provide some support on this issue?

    Thank You!
  3. Answer
    Slav avatar
    1359 posts

    Posted 11 Apr 2013 Link to this post

    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,
    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.
  4. Rengo
    Rengo avatar
    25 posts
    Member since:
    Nov 2012

    Posted 11 Apr 2013 Link to this post

    Thank You Slav!  That is exactly what I was looking for.
  5. Matt
    Matt avatar
    99 posts
    Member since:
    Jun 2012

    Posted 26 Nov 2019 in reply to Slav Link to this post

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

  6. Rumen
    Rumen avatar
    14323 posts

    Posted 28 Nov 2019 Link to this post


    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.

    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.
Back to Top