Custom Cell Element Tooltip

[Christian]

Hi,

1) I have a custom grid column/cell based on the examples

protected override void CreateChildElements()
{
    base.CreateChildElements();

    this._stackElement = new StackLayoutElement();
    this._stackElement.StretchHorizontally = true;
    this._stackElement.StretchVertically = true;

    this._textElement = new LightVisualElement();
    this._textElement.StretchHorizontally = true;
    this._textElement.StretchVertically = true;
    //this._textElement.Padding = new Padding(0, 0, 5, 0);

    this._imageElement = new LightVisualElement();
    this._imageElement.ImageAlignment = System.Drawing.ContentAlignment.MiddleRight;
    this._imageElement.ImageLayout = ImageLayout.Center;
    this._imageElement.Size =
    this._imageElement.MaxSize = new System.Drawing.Size(20, 20);
    this._imageElement.StretchHorizontally = false;
    this._imageElement.StretchVertically = true;
    this._imageElement.Click += (o, e) =>
    {
        if (this.Enabled)
            ...
    };

    _stackElement.Children.Add(_textElement);
    _stackElement.Children.Add(_imageElement);

    this.Children.Add(_stackElement);
}

 

Now the problem is, the sender in the grid OnToolTipTextNeeded is the LightVisualElement from the textElement/imageElement and not the cell it self (compared to the other "normal" columns)

I know that I get the cell over the Parent.Parent from the LightVisualElement but is there a simpler / more generic way? 

 

2) Also is with the StackLayoutElement, is there any way that the image element would be the last to hide if the column width is to small (see attached images) 

 

 

[Dess | Tech Support Engineer, Principal]

Hello, Christian,        

I suppose that you followed this help article for implementing the custom cell: https://docs.telerik.com/devtools/winforms/controls/gridview/cells/creating-custom-cells

In order to obtain the cell itself as a sender in the ToolTipTextNeeded event, ensure that the inner custom elements don't handle mouse input. Here is the modified code snippet of the CreateChildElements:

protected override void CreateChildElements()
{
    base.CreateChildElements();

    this._stackElement = new StackLayoutElement();
    this._stackElement.ShouldHandleMouseInput = false;
    this._stackElement.StretchHorizontally = true;
    this._stackElement.StretchVertically = true;

    this._textElement = new LightVisualElement();
    this._textElement.ShouldHandleMouseInput = false;
    this._textElement.StretchHorizontally = true;
    this._textElement.StretchVertically = true;

    this._imageElement = new LightVisualElement();
    this._imageElement.ShouldHandleMouseInput = false;
    this._imageElement.ImageAlignment = System.Drawing.ContentAlignment.MiddleRight;
    this._imageElement.ImageLayout = ImageLayout.Center;
    this._imageElement.Size =
        this._imageElement.MaxSize = new System.Drawing.Size(20, 20);
    this._imageElement.StretchHorizontally = false;
    this._imageElement.StretchVertically = true;
    this._imageElement.Click += (o, e) =>
    {
    };

    _stackElement.Children.Add(_textElement);
    _stackElement.Children.Add(_imageElement);

    this.Children.Add(_stackElement);
}

According to the provided screenshots, it seems that you want to display text and image in the cell element. For achieving this you don't need actually a custom cell at all. Feel free to use the standard GridViewTextBoxColumn. In the CellFormatting event you can assign an image to the cell element. When you shrink the column, the image will be always shown even thought the whole text is clipped.

However, if you need to control how the inner elements are arranged in your custom cell, please refer to the following code snippet which result is illustrated in the attached gif file:

public RadForm1()
{
    InitializeComponent();
    this.radGridView1.ToolTipTextNeeded += radGridView1_ToolTipTextNeeded;
}

private void radGridView1_ToolTipTextNeeded(object sender, ToolTipTextNeededEventArgs e)
{
    Console.WriteLine(sender);
}

private void RadForm1_Load(object sender, EventArgs e)
{
    this.productsTableAdapter.Fill(this.nwindDataSet.Products);

    CustomGridViewDataColumn customColumn = new CustomGridViewDataColumn();
    customColumn.HeaderText = "My columns";
    customColumn.Width = 150;
    this.radGridView1.Columns.Add(customColumn);
}

public class CustomGridDataCellElement : GridDataCellElement
{
    public CustomGridDataCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
    {
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GridDataCellElement);
        }
    }

    LightVisualElement _textElement;
    LightVisualElement _imageElement;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this._textElement = new LightVisualElement();
        this._textElement.AutoEllipsis = true;
        this._textElement.ShouldHandleMouseInput = false;
        this._textElement.StretchHorizontally = true;
        this._textElement.StretchVertically = true;

        this._imageElement = new LightVisualElement();
        this._imageElement.ShouldHandleMouseInput = false;
        this._imageElement.ImageAlignment = System.Drawing.ContentAlignment.MiddleRight;
        this._imageElement.ImageLayout = ImageLayout.Center;
        this._imageElement.Size =
            this._imageElement.MaxSize = new System.Drawing.Size(20, 20);
        this._imageElement.StretchHorizontally = false;
        this._imageElement.StretchVertically = true;
        this._imageElement.Click += (o, e) =>
        {
        };

        this.Children.Add(_textElement);
        this.Children.Add(_imageElement);
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        SizeF s = base.ArrangeOverride(finalSize);
        RectangleF clientRect = this.GetClientRectangle(finalSize);
        RectangleF imageRect = new RectangleF(clientRect.X + clientRect.Width - this._imageElement.DesiredSize.Width, clientRect.Y, this._imageElement.DesiredSize.Width, clientRect.Height);
        this._imageElement.Arrange(imageRect);
        RectangleF textRect = new RectangleF(clientRect.X , clientRect.Y, clientRect.Width - this._imageElement.DesiredSize.Width, clientRect.Height);
        this._textElement.Arrange(textRect);
        return s;
    }

    protected override SizeF MeasureOverride(SizeF availableSize)
    {
        SizeF s = base.MeasureOverride(availableSize);
        RectangleF clientRect = this.GetClientRectangle(availableSize);
        RectangleF imageRect = new RectangleF(clientRect.X + clientRect.Width - this._imageElement.DesiredSize.Width, clientRect.Y, this._imageElement.DesiredSize.Width, clientRect.Height);
        this._imageElement.Measure(imageRect.Size);
        RectangleF textRect = new RectangleF(clientRect.X , clientRect.Y, clientRect.Width - this._imageElement.DesiredSize.Width, clientRect.Height);
        this._textElement.Measure(textRect.Size);
        return s;
    }

    protected override void SetContentCore(object value)
    {
        base.SetContentCore(value);
        if (this.RowInfo == null)
        {
            return;
        }

        _textElement.Text = this.RowInfo.Cells["ProductName"].Value + "";
        _imageElement.Image = Properties.Resources.edit;
    }

    public override bool IsCompatible(GridViewColumn data, object context)
    {
        return data is CustomGridViewDataColumn && context is GridDataRowElement;
    }
}

public class CustomGridViewDataColumn : GridViewDataColumn
{
    public override Type GetCellType(GridViewRowInfo row)
    {
        if (row is GridViewDataRowInfo)
        {
            return typeof(CustomGridDataCellElement);
        }
        return base.GetCellType(row);
    }
}

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 



Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik