RadButton : ToolTip with HTML content

[Francois]

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!

[Francois]

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?

[Richard Slade]

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

[Richard Slade]

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

[Francois]

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;
        }
    }
}

[Stefan]

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

[Francois]

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

--
Frank