Display HTML exported from RadRichTextBox in Cell

16 posts, 0 answers
  1. Doug
    Doug avatar
    10 posts
    Member since:
    Dec 2011

    Posted 14 May 2012 Link to this post

    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>


     

  2. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 15 May 2012 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Doug
    Doug avatar
    10 posts
    Member since:
    Dec 2011

    Posted 15 May 2012 Link to this post

    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.
  5. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 16 May 2012 Link to this post

    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
  6. Jack
    Admin
    Jack avatar
    2335 posts

    Posted 17 May 2012 Link to this post

    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 >>
  7. Ab
    Ab avatar
    11 posts
    Member since:
    Jul 2013

    Posted 23 Aug 2013 Link to this post

    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
  8. George
    Admin
    George avatar
    500 posts

    Posted 27 Aug 2013 Link to this post

    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 >>
  9. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 14 Apr 2014 Link to this post

    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
  10. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 14 Apr 2014 in reply to Themos Link to this post

    here's a screenshot:
  11. Ab
    Ab avatar
    11 posts
    Member since:
    Jul 2013

    Posted 14 Apr 2014 in reply to Themos Link to this post

    Appears that the label is overlapping the text, try by applying a margin / padding - hopefully that might fix the issue
  12. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 14 Apr 2014 in reply to Ab Link to this post

    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)
  13. Ab
    Ab avatar
    11 posts
    Member since:
    Jul 2013

    Posted 14 Apr 2014 in reply to Themos Link to this post

    The only other thing I can think of is applying couple of  spaces "&nbsp;" after </b>
  14. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 15 Apr 2014 in reply to Ab Link to this post

    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:
  15. George
    Admin
    George avatar
    500 posts

    Posted 17 Apr 2014 Link to this post

    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.

     
  16. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 25 Apr 2014 in reply to George Link to this post

    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...
  17. George
    Admin
    George avatar
    500 posts

    Posted 30 Apr 2014 Link to this post

    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.
     
Back to Top
UI for WinForms is Visual Studio 2017 Ready