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

Changing Style on Cell hover

I am trying to change the style of a row on cell hover. I was using the mouseHover feature but wasn't able to get the row it hovered and change that specific row style. I would like it that when it's hovered, the row would turn a different color.

You could do this easily with the datagridview with the cellcontentHover function, but didn't know how to implement this on the sfDataGrid since it's focused on the column.

1 Reply

JP Jagadeesan Pichaimuthu Syncfusion Team May 28, 2019 07:14 AM UTC

Hi Julius, 
Thanks for using Syncfusion products. 
If you want to change the color of the hovered row, you can use the TableControl.MouseMove and QueryCellStyle events. Refer to the following snippet code, 
Code Snippet: 
int hoveredRowIndex = -1; 
sfDataGrid1.TableControl.MouseMove += TableControl_MouseMove; 
sfDataGrid1.QueryCellStyle += sfDataGrid1_QueryCellStyle; 
sfDataGrid1.TableControl.MouseLeave += TableControl_MouseLeave; 
void sfDataGrid1_QueryCellStyle(object sender, Syncfusion.WinForms.DataGrid.Events.QueryCellStyleEventArgs e) 
    if (e.RowIndex == hoveredRowIndex) 
        //Set the back color for the hovered row cells. 
        e.Style.BackColor = Color.Yellow; 
void TableControl_MouseMove(object sender, MouseEventArgs e) 
    var rowColumnIndex =this.sfDataGrid1.TableControl.PointToCellRowColumnIndex(this.sfDataGrid1.TableControl.PointToClient(Cursor.Position)); 
    // Update the hovered row index. 
    if (hoveredRowIndex != rowColumnIndex.RowIndex) 
        hoveredRowIndex = rowColumnIndex.RowIndex; 
        sfDataGrid1.TableControl.Invalidate(sfDataGrid1.TableControl.GetRowRectangle(hoveredRowIndex, true)); 
void TableControl_MouseLeave(object sender, EventArgs e) 
    //To remove the hovered row color while the mouse is leaves the SfDataGrid. 
    sfDataGrid1.TableControl.Invalidate(sfDataGrid1.TableControl.GetRowRectangle(hoveredRowIndex, true)); 
    hoveredRowIndex = -1; 
Let us know whether this helps also if you need any further assistance on this.  

Live Chat Icon For mobile
Up arrow icon