We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

GridButtonColumn mouse hover

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


6 Replies

DM Dhanasekar Mohanraj Syncfusion Team October 28, 2022 09:10 AM

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.



SA Sergio Ayala October 29, 2022 01:26 AM

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());






DM Dhanasekar Mohanraj Syncfusion Team October 31, 2022 09:56 AM

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



DM Dhanasekar Mohanraj Syncfusion Team November 2, 2022 09:06 AM

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


SA Sergio Ayala November 2, 2022 10:31 AM

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.



DM Dhanasekar Mohanraj Syncfusion Team November 3, 2022 09:12 AM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon