Articles in this section
Category / Section

How to apply the row mouse hover effect in DataGrid(SfDataGrid)?

1 min read

By default, SfDataGrid does not provide the direct support for change the background color when mouse hover. You can change the background color by using SfDataGrid.QueryCellStyle event.

sfDataGrid1.TableControl.MouseMove += TableControl_MouseMove; 
sfDataGrid1.QueryCellStyle += sfDataGrid1_QueryCellStyle; 
sfDataGrid1.TableControl.MouseLeave += TableControl_MouseLeave; 
 
int hoveredRowIndex = -1;
 
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;
}
 
 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)
            {                  sfDataGrid1.TableControl.Invalidate(sfDataGrid1.TableControl.GetRowRectangle(hoveredRowIndex, true));
                hoveredRowIndex = rowColumnIndex.RowIndex;
                sfDataGrid1.TableControl.Invalidate(sfDataGrid1.TableControl.GetRowRectangle(hoveredRowIndex, true));
            }
}
 

 

SfDataGrid Mouse hover

 

View Sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied