RadButton : ToolTip with HTML content

7 posts, 1 answers
  1. Francois
    Francois avatar
    52 posts
    Member since:
    Dec 2010

    Posted 18 Apr 2012 Link to this post

    Hi,

    Is there a way to show HTML content in a tooltip?

    I'm trying to show a table in the tool-tip, so HTML would be great.

    I tried with the following, which basically just show the code as text :

    <h1>Header</h1>
    <table border="1" cellspacing="0">
        <tr>
            <td><b>Col 1</b></td>
            <td><b>Col 2</b></td>
            <td><b>Col 3</b></td>
        </tr>
    </table>
    </html>

    Thanks!
  2. Francois
    Francois avatar
    52 posts
    Member since:
    Dec 2010

    Posted 19 Apr 2012 Link to this post

    Even if HTML rendering would be possible, I suppose the supported tags would be limited to those listed from the documentation.

    I'm currently considering writing a basic HTML parser to generate a gridview and show it. I know that will sound crazy, but would it be possible to show it in the popup (like adding any control)? Or generate the gridview, export it to an image format in memory and show the image in the popup?
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 20 Apr 2012 Link to this post

    Hello, 

    You can display some HTML content inside a ScreenTip (like the office style tips) but not all HTML tags are supported. 
    Have a look at this help topic on adding screentips and then this help topic on HTML like formatting

    However, in short, tables are not supported. 

    Hope this helps
    Richard
  5. Answer
    Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 20 Apr 2012 Link to this post

    Francois, 

    You can also add (as you suggested) a RadGridView to a ScreenTip using the RadHostItem. For exmaple: 

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;
    using Telerik.WinControls;
    using Telerik.WinControls.UI;
     
    namespace RadControlsWinFormsApp1
    {
        public partial class Form1 : Form
        {
            RadOffice2007ScreenTipElement screenTip = new RadOffice2007ScreenTipElement();
            List<Item> items = new List<Item>();
            RadGridView grid = new RadGridView();
     
            public Form1()
            {
                InitializeComponent();
     
                items.Add(new Item(1, "Item1"));
                items.Add(new Item(2, "Item2"));
     
                grid.ReadOnly = true;
                grid.DataSource = items;
                grid.ShowGroupPanel = false;
                grid.ShowFilteringRow = false;
                grid.ShowRowHeaderColumn = false;
                grid.Size = new Size(150, 100);
     
                this.radButton1.ScreenTipNeeded += new ScreenTipNeededEventHandler(radButton1_ScreenTipNeeded);
     
            }
     
     
            private void radButton1_ScreenTipNeeded(object sender, Telerik.WinControls.ScreenTipNeededEventArgs e)
            {
                 
                screenTip.MainTextLabel.Padding = new Padding(2);
                screenTip.CaptionLabel.Padding = new Padding(2);
                screenTip.CaptionLabel.Text = "Caption";
                screenTip.MainTextLabel.Text = "";
                screenTip.EnableCustomSize = false;
                RadHostItem host = new RadHostItem(grid);
                screenTip.Children.Add(host);
                screenTip.AutoSize = false;
                screenTip.Size = grid.Size;
                this.radButton1.ButtonElement.ScreenTip = screenTip;
            }
     
     
     
        }
     
        public class Item
        {
            public Item()
            { }
     
            public Item(int id, string name)
            {
                Id = id;
                Name = name;
            }
     
            public int Id
            { get; set; }
     
            public string Name
            { get; set; }
     
        }
     
     
    }


    Please remember to mark as answer if this helps, or let me know if you have further questions
    Richard
  6. Francois
    Francois avatar
    52 posts
    Member since:
    Dec 2010

    Posted 20 Apr 2012 Link to this post

    Thank you Richard,

    I have added the grid in the screentip and created a basic html parser to build the grid. The only problem is that the first time the screentip appears, the size of the grid have not been rendered, so the popup size is incorrect. The next time the popup is shown, the size is correct.

    Do you know a way to deal with this?

    Thanks!

    using System.Drawing;
    using System.Linq;
    using System.Xml.Linq;
    using Telerik.WinControls;
    using Telerik.WinControls.UI;
     
    namespace RadControlsWinFormsApp1
    {
        public class Form1 : RadForm
        {
            #region Designer
            /// <summary>
            /// Required designer variable.
            /// </summary>
            private System.ComponentModel.IContainer components;
     
            /// <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.radButton1 = new Telerik.WinControls.UI.RadButton();
                ((System.ComponentModel.ISupportInitialize)(this.radButton1)).BeginInit();
                ((System.ComponentModel.ISupportInitialize)(this)).BeginInit();
                this.SuspendLayout();
                //
                // radButton1
                //
                this.radButton1.Location = new System.Drawing.Point(30, 12);
                this.radButton1.Name = "radButton1";
                this.radButton1.Size = new System.Drawing.Size(334, 91);
                this.radButton1.TabIndex = 0;
                this.radButton1.Text = "radButton1";
                //
                // Form1
                //
                this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
                this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
                this.ClientSize = new System.Drawing.Size(401, 122);
                this.Controls.Add(this.radButton1);
                this.Name = "Form1";
                //
                //
                //
                this.RootElement.ApplyShapeToControl = true;
                this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
                this.Text = "Form1";
                ((System.ComponentModel.ISupportInitialize)(this.radButton1)).EndInit();
                ((System.ComponentModel.ISupportInitialize)(this)).EndInit();
                this.ResumeLayout(false);
     
            }
     
            private Telerik.WinControls.UI.RadButton radButton1;
            #endregion
     
     
            #endregion
     
            private RadOffice2007ScreenTipElement screenTip;
            private RadGridView _grid;
     
            public Form1()
            {
                InitializeComponent();
     
                this.radButton1.ScreenTipNeeded += new ScreenTipNeededEventHandler(radButton1_ScreenTipNeeded);
            }
     
            /// <summary>
            ///
            /// </summary>
            /// <param name="htmlSource"></param>
            private void BuildGridHtml(string htmlSource)
            {
                var xmlDoc = XDocument.Parse(htmlSource);
     
                // Two lines header
                this._grid.TableElement.TableHeaderHeight = 35;
                this._grid.EnableAlternatingRowColor = true;
                this._grid.ViewCellFormatting += new CellFormattingEventHandler(Grid_ViewCellFormatting);
     
                bool firstRow = true;
                foreach (var line in xmlDoc.Root.Element("table").Elements("tr"))
                {
                    if (firstRow)
                    {
                        foreach (var col in line.Elements("td"))
                        {
                            var gridCol = new GridViewTextBoxColumn(col.Value);
                            gridCol.Width = 85;
                            gridCol.TextAlignment = ContentAlignment.MiddleCenter;
                            gridCol.WrapText = true;
     
                            this._grid.Columns.Add(gridCol);
                        }
     
                        firstRow = false;
                    }
                    else
                    {
                        this._grid.Rows.Add(line.Elements("td").Select(w => w.Value).ToArray());
                    }
                }
            }
     
            private void Grid_ViewCellFormatting(object sender, CellFormattingEventArgs e)
            {
                if (e.ColumnIndex == 0 && e.Row is GridViewDataRowInfo)
                {
                    e.CellElement.Font = new Font(e.CellElement.Font, FontStyle.Bold);
                }
            }
     
            private void radButton1_ScreenTipNeeded(object sender, Telerik.WinControls.ScreenTipNeededEventArgs e)
            {
                if (screenTip == null)
                {
                    screenTip = new Telerik.WinControls.UI.RadOffice2007ScreenTipElement();
                }
     
                if (this._grid == null)
                {
                    this._grid = new RadGridView();
                    this._grid.ReadOnly = true;
                    this._grid.ShowGroupPanel = false;
                    this._grid.ShowFilteringRow = false;
                    this._grid.ShowRowHeaderColumn = false;
                    this._grid.AutoSize = true;
     
                    this.BuildGridHtml("<html><table><tr><td><b>Nb de logements</b></td><td><b>Nb bacs gris 360 L</b></td><td><b>Nb bacs gris 240 L</b></td><td><b>Nb bacs bleu 360 L</b></td></tr><tr><td>1</td><td></td><td>1</td><td>1</td></tr><tr><td>2</td><td>1</td><td></td><td>1</td></tr><tr><td>3</td><td></td><td>2</td><td>2</td></tr><tr><td>4 à 5</td><td>2</td><td></td><td>2</td></tr><tr><td>6 à 8</td><td>3</td><td></td><td>3</td></tr><tr><td>9</td><td>4</td><td></td><td>4</td></tr></table></html>");
                    this._grid.CurrentRow = null;
                }
     
                //screenTip.MainTextLabel.Padding = new Padding(2);
                //screenTip.CaptionLabel.Padding = new Padding(2);
                screenTip.CaptionLabel.Text = "Nombre de bacs selon le nombre de logements";
                screenTip.CaptionLabel.TextAlignment = ContentAlignment.MiddleCenter;
                screenTip.MainTextLabel.Visibility = ElementVisibility.Hidden;
                screenTip.EnableCustomSize = false;
     
                var headerHeight = 20;
     
                RadHostItem host = new RadHostItem(this._grid);
                host.PositionOffset = new SizeF(0, headerHeight);
                screenTip.Children.Add(host);
                screenTip.AutoSize = false;
                screenTip.Size = new Size(this._grid.Size.Width, this._grid.Size.Height + headerHeight);
     
                this.radButton1.ButtonElement.ScreenTip = screenTip;
            }
        }
    }
  7. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 21 Apr 2012 Link to this post

    Hi Francois, Richard,

    Thank you guys for writing.

    In regards to the case where the size is incorrect when the grid is initially shown, this is caused by the fact that its layout is not yet calculated. To force the layout to pass in advance, you can use the LoadElementTree method of the control. Attached you can find the modified version of the sample project.

    I hope that you find this information useful. Let us know if you have any other questions.
     
    All the best,
    Stefan
    the Telerik team
    RadControls for WinForms Q1'12 release is now live! Check out what's new or download a free trial >>
  8. Francois
    Francois avatar
    52 posts
    Member since:
    Dec 2010

    Posted 23 Apr 2012 Link to this post

    Thanks to both of you, it works like a charm.

    --
    Frank
Back to Top
UI for WinForms is Visual Studio 2017 Ready