Popup Form/Panel On Cell Hover/Click

[Nick Anderson]

Is there any way to implement a panel or a form that displays when a user hovers over or clicks on a cell in the grid? 

I've looked at the code on how the combobox does its dropdown, using the PopupForm class, but i haven't had any luck.

What about a button that shows a drop down? basically a combobox without the textbox aspect. I want to be able to put the contents of a usercontrol on to the popped-up panel.

[Jack]

Hello Nick,

You could use a screentip if the form shouldn't be interactive. You should handle the ScreenTipNeeded event and create a new screen tip control based on RadScreenTipElement. There is a demo on using screen tips with RadGridView in our Quick Start Framework. Please look at the "Screen Tips" example for RadGridView.

If you want more interactivity, you can use a context menu containing custom menu element. Here is a sample:

public class CustomMenuItem : RadMenuItemBase
{
    Control control;
    RadHostItem hostItem;

    public CustomMenuItem(Control control)
    {
        this.control = control;
    }

    protected override void CreateChildElements()
    {
        hostItem = new RadHostItem(control);
        this.Children.Add(hostItem);
    }

    protected override SizeF MeasureOverride(SizeF availableSize)
    {
        SizeF size = base.MeasureOverride(availableSize);
        return control.Size;
    }
}

void radGridView1_CellClick(object sender, GridViewCellEventArgs e)
{
    Point location = this.radGridView1.CurrentCell.GridControl.PointToScreen(this.radGridView1.CurrentCell.ControlBoundingRectangle.Location);
    location.Y += this.radGridView1.CurrentCell.Size.Height;
    RadContextMenu menu = new RadContextMenu();
    menu.Items.Add(new CustomMenuItem(new UserControl1()));
    menu.Show(location);
}

Currently it can't be used for keyboard input. We will address that issue in our upcoming release.

I hope this helps. If you have any other questions, don't hesitate to write us.

Kind regards,
Jack
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Société CompuGROUP Medical Solutions]

Hello, 

I take profit of this post for getting help with RadScreenTipElement and formatting content.
Actually I need to display 4 sub elements  (screentip only take 3). These element are juste image and text.

Actually I can't find a way to resize my radscreentipelement properly for it to wrap fit children 

Same for the background color.

Can you please indicate me how to resize the radScreenTipElement to his content, and change backcolor to white please?

My code : 

class CGMToolTip : RadScreenTipElement
{
    LightVisualElement contentElement1 = new LightVisualElement();
    LightVisualElement contentElement2 = new LightVisualElement();
    LightVisualElement contentElement3 = new LightVisualElement();
    LightVisualElement contentElement4 = new LightVisualElement();

    public LightVisualElement ContentElement1
    {
        get
        {
            return contentElement1;
        }
    }

    public LightVisualElement ContentElement2
    {
        get
        {
            return contentElement2;
        }
    }

    public LightVisualElement ContentElement3
    {
        get
        {
            return contentElement3;
        }
    }

    public LightVisualElement ContentElement4
    {
        get
        {
            return contentElement4;
        }
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        base.AutoSize = true;
        base.AutoSizeMode = RadAutoSizeMode.WrapAroundChildren;
        base.BackColor = Color.White;
        base.BorderThickness = new Padding(1);
        base.FocusBorderColor = Color.White;
        base.FocusBorderWidth = 1;
        base.ShadowDepth = 0;
        base.Padding = new Padding(10);
        base.Size = new Size(600, 400);

        contentElement1.DrawFill = true;
        contentElement1.DrawText = true;
        contentElement1.GradientStyle = GradientStyles.Solid;
        contentElement1.TextImageRelation = TextImageRelation.ImageBeforeText;
        this.Children.Add(contentElement1);

        contentElement2.DrawFill = true;
        contentElement2.DrawText = true;
        contentElement2.Location = new Point(contentElement2.Location.X, contentElement2.Location.Y + 30);
        contentElement2.GradientStyle = GradientStyles.Solid;
        contentElement2.TextImageRelation = TextImageRelation.ImageBeforeText;
        this.Children.Add(contentElement2);

        contentElement3.DrawFill = true;
        contentElement3.DrawText = true;
        contentElement3.Location = new Point(contentElement3.Location.X, contentElement3.Location.Y + 30);
        contentElement3.GradientStyle = GradientStyles.Solid;
        contentElement3.TextImageRelation = TextImageRelation.ImageBeforeText;
        this.Children.Add(contentElement3);

        contentElement4.DrawFill = true;
        contentElement4.DrawText = true;
        contentElement4.Location = new Point(contentElement2.Location.X, contentElement4.Location.Y + 30);
        contentElement4.GradientStyle = GradientStyles.Solid;
        contentElement4.TextImageRelation = TextImageRelation.ImageBeforeText;
        this.Children.Add(contentElement4);

    }

And the use of this class on ScreenTipNeeded Event: 

var toolTip = new CGMToolTip();
toolTip.Size = new Size(600, 400);
toolTip.ContentElement1.Text = "Flex1";
toolTip.ContentElement1.Image = Properties.Resources.ok;
toolTip.ContentElement2.Text = "Flex2";
toolTip.ContentElement2.Image = Properties.Resources.error;
toolTip.ContentElement3.Text = "Flex3";
toolTip.ContentElement3.Image = Properties.Resources.ok;
toolTip.ContentElement4.Text = "Flex4";
toolTip.ContentElement4.Image = Properties.Resources.error;
e.Item.ScreenTip = toolTip;

 

Thanks for help !

[Nadya | Tech Support Engineer]

Hello Laurent,

The provided information and code snippet are greatly appreciated. If you want to set a specified size of RadScreenTipElement it is necessary to set EnableCustomSize to true and AutoSize property to false and the set the Size property to the desired size in the ScreenTipNeeded event:

toolTip.AutoSize = true;
toolTip.EnableCustomSize = true;
toolTip.Size = new Size(600,400);

If your requirement is to resize the custom RadScreenTipElement automatically to fit its content I can suggest you to use a StackLayoutElement in the CreateChildElements method and add the LightVisualElements in it. Please refer to the updated code snippet that resizes the screen-tip to fit its content:

protected override void CreateChildElements()
{
    base.CreateChildElements();
    base.AutoSize = true;
    // base.AutoSizeMode = RadAutoSizeMode.WrapAroundChildren;
    base.BackColor = Color.White;

    StackLayoutElement stack = new StackLayoutElement();
    stack.Margin = new Padding(-10, -10, -10, -10);
    stack.Orientation = Orientation.Vertical;

    base.BorderThickness = new Padding(1);
    base.FocusBorderColor = Color.White;
    base.FocusBorderWidth = 1;
    base.ShadowDepth = 0;
    base.Padding = new Padding(10);
    // base.Size = new Size(600, 400);

    contentElement1.DrawFill = true;
    contentElement1.StretchVertically = false;
    contentElement1.StretchHorizontally = false;
    contentElement1.DrawText = true;
    contentElement1.GradientStyle = GradientStyles.Solid;
    contentElement1.TextImageRelation = TextImageRelation.ImageBeforeText;
    stack.Children.Add(contentElement1);

    contentElement2.DrawFill = true;
    contentElement2.StretchVertically = false;
    contentElement2.StretchHorizontally = false;
    contentElement2.DrawText = true;
    //    contentElement2.Location = new Point(contentElement2.Location.X, contentElement2.Location.Y + 30);
    contentElement2.GradientStyle = GradientStyles.Solid;
    contentElement2.TextImageRelation = TextImageRelation.ImageBeforeText;
    stack.Children.Add(contentElement2);

    contentElement3.DrawFill = true;
    contentElement3.StretchVertically = false;
    contentElement3.StretchHorizontally = false;
    contentElement3.DrawText = true;
    //  contentElement3.Location = new Point(contentElement3.Location.X, contentElement3.Location.Y + 30);
    contentElement3.GradientStyle = GradientStyles.Solid;
    contentElement3.TextImageRelation = TextImageRelation.ImageBeforeText;
    stack.Children.Add(contentElement3);

    contentElement4.DrawFill = true;
    contentElement4.StretchVertically = false;
    contentElement4.StretchHorizontally = false;
    contentElement4.DrawText = true;
    //contentElement4.Location = new Point(contentElement2.Location.X, contentElement4.Location.Y + 30);
    contentElement4.GradientStyle = GradientStyles.Solid;
    contentElement4.TextImageRelation = TextImageRelation.ImageBeforeText;
    stack.Children.Add(contentElement4);
    this.Children.Add(stack);
}

This is the achieved result:

I hope this helps. Should you have any other questions, I will be glad to help.

Regards,
Nadya
Progress Telerik