GridButtonColumn mouse hover

[Sergio Ayala]

hi, i need a "button" column to show an icon on hover mouse. I need it before clicking. Is that 

[Dhanasekar Mohanraj]

Hi Sergio Ayala,

The provided details are not enough to understand your requirement. Could you please share the below things?

        1. Provide more details about your scenario with illustrations?

        2. Provide more details about your scenario with image illustrations?

        3. Can you please share your exact requirement?     

It will be helpful for us to check on it and provide you with a solution at the earliest.

Regards,

Dhanasekar M.

[Sergio Ayala]

the question is clear, I have a GridButtonColumn column that I need to show an image when hovering over a button. I know how to put images but I want it to only appear when the mouse hovers over the button just before clicking it, then it goes back to being without the image as it was. I understand that I have to use a renderer class but I can't get it to work.

  this.v.DGrid.CellRenderers.Remove("ButtonEdit");

  this.v.DGrid.CellRenderers.Add("ButtonEdit", new MyCellButton());

[Dhanasekar Mohanraj]

Currently, we are checking the feasibility to achieve your requirement. We will update you with further details on November 02, 2022.

[Dhanasekar Mohanraj]

You can achieve your requirement to display the image while hovering the button will be achievable by overriding the OnMouseHover, OnMouseDown, OnRender, and OnMouseHoverLeave methods shown below,

public class GridButtonCellRendererExt : GridButtonCellRenderer

{

    private SfDataGrid sfDataGrid;

 

    public GridButtonCellRendererExt(SfDataGrid sfDataGrid1)

    {

        this.sfDataGrid = sfDataGrid1;

    }

 

    bool isShowImage;

    System.Windows.Forms.Timer MyTimer = new System.Windows.Forms.Timer();

    RowColumnIndex rowcolumnIndex = new RowColumnIndex();

    protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex)

    {

        

        if (isShowImage)

            DrawImage(paint, cellRect, Image.FromFile(@"../../Images/FRANS.png"));

        else

            base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex);     

 

    }

 

    protected override void OnMouseDown(DataColumnBase dataColumn, RowColumnIndex rowColumnIndex, MouseEventArgs e)

    {

        base.OnMouseDown(dataColumn, rowColumnIndex, e);

        isShowImage = false;

        rowcolumnIndex = rowColumnIndex;

        this.sfDataGrid.TableControl.Invalidate(this.sfDataGrid.TableControl.GetRowRectangle(rowColumnIndex.RowIndex, true));

    }

 

    protected override void OnMouseHover(DataColumnBase column, RowColumnIndex rowColumnIndex, MouseEventArgs e)

    {

        base.OnMouseHover(column, rowColumnIndex, e);

        isShowImage = true;

        rowcolumnIndex = rowColumnIndex;

        this.sfDataGrid.TableControl.Invalidate(this.sfDataGrid.TableControl.GetRowRectangle(rowColumnIndex.RowIndex, true));

        MyTimer.Interval = (1 * 60 * 1000); // Image will disappear based on the given timer

        MyTimer.Tick += new EventHandler(MyTimer_Tick);

        MyTimer.Start();

    }

 

    public void MyTimer_Tick(object sender, EventArgs eArgs)

    {

        MyTimer.Stop();

        isShowImage = false;

        this.sfDataGrid.TableControl.Invalidate(this.sfDataGrid.TableControl.GetRowRectangle(rowcolumnIndex.RowIndex, true));

    }

    protected internal virtual void DrawImage(Graphics graphics, Rectangle bounds, Image image)

    {

        graphics.DrawImage(image, Rectangle.Ceiling(bounds), 0, 0, image.Width, image.Height, GraphicsUnit.Pixel);

    }

 

    protected override void OnMouseHoverLeave(DataColumnBase dataColumn, RowColumnIndex rowColumnIndex, MouseEventArgs e)

    {

        base.OnMouseHoverLeave(dataColumn, rowColumnIndex, e);

        rowcolumnIndex = rowColumnIndex;

        isShowImage = false;

        this.sfDataGrid.TableControl.Invalidate(this.sfDataGrid.TableControl.GetRowRectangle(rowColumnIndex.RowIndex, true));

    }

}

Here we have prepared the sample based on your requirement. Please have a look at this.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDatagridDemo_c11e462c.zip

[Sergio Ayala]

I only needed the photo to appear when it was in the cell and disappear when leaving the cell, in addition to showing when I click. (in this example the photo disappears when you click) but this example still works for me. Thank you.

[Dhanasekar Mohanraj]

If you are satisfied with our response, please mark it as an answer. Otherwise, please let us know if you have any further queries on this. We are happy to help you.