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

Display HTML exported from RadRichTextBox in Cell

21 Answers 506 Views

GridView

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

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:

Text

21 Answers, 1 is accepted

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.

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

answered on 23 Aug 2013, 03:11 PM

RADGridView-DisableHTMLRendering-false-does-not-display-HTML.PNG

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

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><span style="color: #006600"> New </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 >>

answered on 15 Apr 2014, 11:30 AM

test2.jpg

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:

answered on 29 Jun 2018, 03:51 AM

webbrowsercellelement.png

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.

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.

answered on 27 Jun 2019, 08:05 AM

beforecfd6ba364b78452aa64ccfc22e6b8ae2.png

after4abba66cab3e481dba35845375d76260.png

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

answered on 28 Jun 2019, 08:02 AM

HTML.zip

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.

answered on 23 Feb 2021, 12:56 PM

htmlcolumn.png

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

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/.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Display HTML exported from RadRichTextBox in Cell

21 Answers, 1 is accepted