This is a migrated thread and some comments may be shown as answers.

Display HTML exported from RadRichTextBox in Cell

21 Answers 244 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 14 May 2012, 09:29 PM

Is it possible to properly display HTML that was exported from a RadRichTextBox in a GridView cell?

The user is allowed to use many of RadRichTextBox's formatting features when entering data into a RadRichTextBox. This data is saved to the database using the HtmlFormatProvider.  I am currently saving the HTML as an HTML fragment with inline formatting.  The HTML is later pulled from the database and used to populate the RadRichTextBox. I am able to retain the HTML formatting with no problem.

However, the HTML is not formatted properly when displayed in a GridView. It is simply displayed as text, including all HTML tags.  Setting DisableHTMLRendering to false for the appropriate columns does not work.

I noticed that simple HTML displays correctly. For example, the following mark-up displays "text" in blue letters as expected:

"<html><color=0,0,255>text"

The following is a simple example of HTML exported from the RadRichTextBox using the HtmlFormatProvider:

<p style="margin: 0px 0px 0px 0px;text-align: left;text-indent: 0pt;padding: 0px 0px 0px 0px;"><span style="font-family: 'Times New Roman';font-style: normal;font-size: 16px;color: #0000FF;">Text</span></p>


 

21 Answers, 1 is accepted

Sort by
0
Richard Slade
Top achievements
Rank 2
answered on 15 May 2012, 09:49 AM
Hello Doug, 

By default, you can display text, formatted using a subset of HTML in a RadGridView GridViewTextBoxColumn cell. 
To do this, you should change the DisableHTMLRendering property for the column to false
E.g. 
this.radGridView1.Columns["Name"].DisableHTMLRendering = false;

You can then display formatted text that follows the HTML-Like formatting article at this link

If you wanted to go further than that, then it would mean creating a custom cell, containing for example a RichTextBox. 
You can learn more about creating custom cells here
Hope that helps
Richard
0
Doug
Top achievements
Rank 1
answered on 16 May 2012, 01:45 AM
Thanks for the response Richard. Unfortunately the simplest method of using the GridViewTextBoxColumn with DisableHTMLRendering set to false is not working for HTML exported from a RadRichTextBox as I mentioned in my original post. If you have any idea why this approach is not working I would greatly appreciate any information in regards to this issue.

Also, I tried to create a custom cell using a RadRichTextBoxElement but this causes my grid to fail to display. I am sure I am missing something. I cannot seem to find a good example of creating a custom cell containing a RadRichTextBoxElement. Do you have a working example or a link to one?

Thanks in advance.
0
Richard Slade
Top achievements
Rank 2
answered on 16 May 2012, 05:07 PM
Hello Doug, 

You could use a WebBrowser to display the HTML in your sample. Here is some sample code that should help get you started. 

Form Designer 
namespace RadControlsWinFormsApp1
{
    partial class RadForm1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;
 
        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }
 
        #region Windows Form Designer generated code
 
        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.radGridView1 = new Telerik.WinControls.UI.RadGridView();
            ((System.ComponentModel.ISupportInitialize)(this.radGridView1)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this)).BeginInit();
            this.SuspendLayout();
            //
            // radGridView1
            //
            this.radGridView1.Dock = System.Windows.Forms.DockStyle.Fill;
            this.radGridView1.Location = new System.Drawing.Point(0, 0);
            this.radGridView1.Name = "radGridView1";
            this.radGridView1.Size = new System.Drawing.Size(641, 511);
            this.radGridView1.TabIndex = 0;
            this.radGridView1.Text = "radGridView1";
            //
            // RadForm1
            //
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(641, 511);
            this.Controls.Add(this.radGridView1);
            this.Name = "RadForm1";
            //
            //
            //
            this.RootElement.ApplyShapeToControl = true;
            this.Text = "RadForm1";
            this.ThemeName = "ControlDefault";
            ((System.ComponentModel.ISupportInitialize)(this.radGridView1)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this)).EndInit();
            this.ResumeLayout(false);
 
        }
 
        #endregion
 
        private Telerik.WinControls.UI.RadGridView radGridView1;
 
 
 
    }
}

Form 1
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using Telerik.WinControls;
using Telerik.WinControls.UI;
using System.Linq;
 
namespace RadControlsWinFormsApp1
{
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        public RadForm1()
        {
            InitializeComponent();
 
            List<User> users = new List<User>();
            int k = 0;
            while (k <= 20)
            {
                bool hasBeard = (k % 2 == 0);
                users.Add(new User(k, "User " + k.ToString(), hasBeard, "<p style=\"margin: 0px 0px 0px 0px;text-align: left;text-indent: 0pt;padding: 0px 0px 0px 0px;\"><span style=\"font-family: 'Times New Roman';font-style: normal;font-size: 16px;color: #0000FF;\">Text</span></p>"));
                k++;
            }
            this.radGridView1.AutoGenerateColumns = false;
            this.radGridView1.DataSource = users;
            this.radGridView1.ReadOnly = false;
 
            GridViewDecimalColumn idColumn = new GridViewDecimalColumn("Id");
            GridViewTextBoxColumn nameColumn = new GridViewTextBoxColumn("Name");
            GridViewCheckBoxColumn beardColumn = new GridViewCheckBoxColumn("HasBeard");
            WebBrowserColumn htmlColumn = new WebBrowserColumn("Html");
            this.radGridView1.Columns.Add(idColumn);
            this.radGridView1.Columns.Add(nameColumn);
            this.radGridView1.Columns.Add(beardColumn);
            this.radGridView1.Columns.Add(htmlColumn);
 
            this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
            this.radGridView1.BestFitColumns();
 
 
            foreach (GridViewRowInfo row in this.radGridView1.ChildRows)
            {
                row.Height = 50;
            }
            this.radGridView1.AllowRowResize = false;
        }
 
 
 
    }
 
    public class User
    {
        public User(int id, string name, bool hasBeard, string html)
        {
            Id = id;
            Name = name;
            HasBeard = hasBeard;
            Html = html;
        }
 
        public User()
        { }
 
        public int Id
        {
            get;
            set;
        }
 
        public string Name
        {
            get;
            set;
        }
 
        public bool HasBeard
        {
            get;
            set;
        }
 
        public string Html
        {
            get;
            set;
        }
    }
 
}

WebBrowserCellElement
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Telerik.WinControls;
using Telerik.WinControls.UI;
using Telerik.WinControls.RichTextBox;
using Telerik.WinControls.RichTextBox.Model.Styles;
 
namespace RadControlsWinFormsApp1
{
    public class WebBrowserCellElement : GridDataCellElement
    {
 
        public WebBrowserCellElement(GridViewColumn column, GridRowElement row)
            : base(column, row)
        {
        }
 
        private RadWebBrowserElement _webBrowserElement;
 
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
 
            _webBrowserElement = new RadWebBrowserElement();
            this.Children.Add(_webBrowserElement);
        }
 
        protected override void SetContentCore(object value)
        {
            if (this.Value != null && this.Value != DBNull.Value)
            {
                this._webBrowserElement.DocumentText = value.ToString();
            }
        }
 
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(GridDataCellElement);
            }
        }
 
        public override bool IsCompatible(GridViewColumn data, object context)
        {
            return data is WebBrowserColumn && context is GridDataRowElement;
        }
 
    }
 
 
}

WebBrowserColumn
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Telerik.WinControls;
using Telerik.WinControls.UI;
 
namespace RadControlsWinFormsApp1
{
    public class WebBrowserColumn : GridViewDataColumn
    {
        public WebBrowserColumn(string fieldName)
            : base(fieldName)
        {
        }
 
        public override Type GetCellType(GridViewRowInfo row)
        {
            if (row is GridViewDataRowInfo)
            {
                return typeof(WebBrowserCellElement);
            }
            return base.GetCellType(row);
        }
    }
}

Hope that helps
Richard
0
Jack
Telerik team
answered on 17 May 2012, 01:52 PM
Hello,

The html formatting feature available when setting the DisableHTMLRendering property to false supports only a limited number of html tags. Full list of them is available in our online documentation. This feature does not support css styles.

Currently, it is not possible to use our RadRichTextBox as cell content presenter and the only option is the one provided by Richard.

If you have any further questions, we will be glad to help.
 
Greetings,
Jack
the Telerik team
RadControls for WinForms Q1'12 release is now live! Check out what's new or download a free trial >>
0
Ab
Top achievements
Rank 1
answered on 23 Aug 2013, 03:11 PM
Unfortunately DisableHTMLRendering =false does not render the html even for the supported html tags. see attached image ...  wherein the text is displayed as is. What am I doing wrong?

Also how do I get the grid the expand the row height automatically to display the contents?

FYI: I'm using Winforms.RadGridView 2013 Q2 version
0
George
Telerik team
answered on 27 Aug 2013, 01:31 PM
Hi Abhinav,

Thank you for writing.

Are you sure you are wrapping your cell content with a <html> tag, because that is what is needed to use the HTML formatting. The following code seems to work fine on my end:
<html><b><span style="color: #006600"> New </span></b></html>

To make the rows size themselves automatically according to their content, you need to set the AutoSizeRows property of the grid to true:
grid.AutoSizeRows = true;

And enable text wrapping on the columns:
grid.Columns.Add(new GridViewTextBoxColumn("Col")
    {
        DisableHTMLRendering = false,
        WrapText = true,
    });

Additionally the AutoSizeRows mode will make the rows collapse if they have no content, that is why you need to set their MinHeight property if needed:
for (int i = 0; i < 10; i++)
{
    GridViewRowInfo row = grid.Rows.AddNew();
    row.MinHeight = 20;
}

I hope this helps.
 
Regards,
George
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Themos
Top achievements
Rank 1
answered on 14 Apr 2014, 08:16 AM
Hey guys,

I followed your instructions to format the text as HTML, but now some of the rendered text appears to be cropped:


I tried changing the font but I still got the same results... do you have any idea what might be causing this?

PS: I'm using telerik version 2012 Q1
0
Themos
Top achievements
Rank 1
answered on 14 Apr 2014, 08:19 AM
here's a screenshot:
0
Ab
Top achievements
Rank 1
answered on 14 Apr 2014, 01:08 PM
Appears that the label is overlapping the text, try by applying a margin / padding - hopefully that might fix the issue
0
Themos
Top achievements
Rank 1
answered on 14 Apr 2014, 01:53 PM
Tried it now, neither the padding or the margin affected the cropped text... it seems to be a rendering issue on the letters themselves when I use the <b> tag formatting, as when I remove it the letters appear correctly (I still have the <html> tag and the DisableHTMLRendering = false)
0
Ab
Top achievements
Rank 1
answered on 14 Apr 2014, 03:54 PM
The only other thing I can think of is applying couple of  spaces "&nbsp;" after </b>
0
Themos
Top achievements
Rank 1
answered on 15 Apr 2014, 11:30 AM
I tried adding the spaces but it made no difference... please note that it is not only the bold text that gets cropped, but some of the regular text as well...

Please see the new screenshot for another example:
0
George
Telerik team
answered on 17 Apr 2014, 10:02 AM
Hi Guys,

Thank you for replying.

Themos, I was not able to reproduce this behavior on my end with the version you specified, or with the latest version. I would like to kindly ask you to provide me with the code you are using to format the RadGridView‚Äč cells and the html which you are setting as a text, this will allow me to more precisely test your case.

Looking forward to your reply.

Regards,
George
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Themos
Top achievements
Rank 1
answered on 25 Apr 2014, 10:12 AM
Hey George,

I was able to fix the problem, I had to comment out this line:
rgvWarnings.Columns["Warning"].WrapText = true;

but also the position of the empty spaces on the stored procedure populating the column seemed to affect it as well...
0
George
Telerik team
answered on 30 Apr 2014, 07:53 AM
Hi Themos,

I am glad that you were able to resolve the matter.

Let me know, should you have further questions.

Regards,
George
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Moe
Top achievements
Rank 1
Veteran
answered on 29 Jun 2018, 03:51 AM

Hi Richard,

I would like to ask how to do of  in ? I would like to see the full text(Note column) in Radgridview and I would like to increase row depend on  inside the text. Please see my attached file.

0
Hristo
Telerik team
answered on 29 Jun 2018, 11:58 AM
Hello Moe,

The solution Richard suggested uses a custom cell element which internally hosts the standard Winforms WebBrowser control. It also iterates the rows and sets them with a fixed height. You can try using a separate web browser control and set its DocumentText property with the Html. Then you can get the height of the scroll rectangle as discussed here: https://social.msdn.microsoft.com/Forums/windows/en-US/1a825a40-f93e-478f-98cc-ccdcb82f4189/how-to-get-webbrowser-document-height?forum=winforms. Later you can use this value to set the height of each row.

I hope this helps. 

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rohan
Top achievements
Rank 1
answered on 27 Jun 2019, 08:05 AM
Hi Guys,

Is it possible to display html with table tags within a grid cell.
I tried implementing the solution posted by Richard (using WebBrowser). But I'm facing below issues:
 - Not able to edit the cell value
 - While scrolling down, the cell content is overlapping the header cell.
 
Please see the attached
0
Hristo
Telerik team
answered on 28 Jun 2019, 08:02 AM
Hello Rohan,

We have a feature request for providing means of displaying and editing Rich Text Content in RadGridView. The item is logged on our feedback portal, here: ADD. RadRichTextEditor - allow RadRichTextBoxEditorElement to be added as custom editor in RadGridView, as elements support clipping. You can subscribe to it and be updated when its status changes.

I am also attaching a project in C# with a custom implementation of the RichTextColumn. It can work with the HTML format and uses a hosted RadRichTextEditor control. I hope that this solution would fit your local setup, however, please note that it may not handle all possible cases, e.g. the custom rich-text cells will not be clipped while scrolling the grid. 

I hope this will help.

Regards,
Hristo
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.
0
paulo g
Top achievements
Rank 1
Veteran
answered on 23 Feb 2021, 12:56 PM

Hi 

I am using the solution with GridViewRichTextColumn and it works great in a RadGridView.

I am trying to use it in  GridViewRowDetailsExtended (provided by Richard Slade in https://www.telerik.com/forums/details-view-under-row-in-gridview). If you look at the attached image, at the right side the cell goes over the scroll bar. Is there a property or something that I am missing?

Also I tried with child GridViewTemplate, but it not expands.

 

Paulo

0
Nadya
Telerik team
answered on 25 Feb 2021, 02:14 PM

Hello, Paulo,

Following the provided information it seems that you have built a complex custom layout in RadGridView using custom row details and .custom column with RichTextEditor. Considering the picture, it seems like the custom cell that hosts the RichTextEditorElement overlaps the grid and hides the vertical scrollbar that is shown at the right. You should consider setting an appropriate size/width for that cell in order to prevent it from overlapping the scrollbar. 

However, I am not familiar with the exact setup that you have in RadGridView. If you need further assistance it would be of great help if you can provide a code snippet with the customized grid that you use. Thus, we could be able to investigate precisely the custom case and provide a suitable solution.

Looking forward to your reply.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
GridView
Asked by
Doug
Top achievements
Rank 1
Answers by
Richard Slade
Top achievements
Rank 2
Doug
Top achievements
Rank 1
Jack
Telerik team
Ab
Top achievements
Rank 1
George
Telerik team
Themos
Top achievements
Rank 1
Moe
Top achievements
Rank 1
Veteran
Hristo
Telerik team
Rohan
Top achievements
Rank 1
paulo g
Top achievements
Rank 1
Veteran
Nadya
Telerik team
Share this question
or