Articles in this section
Category / Section

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

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)
Access denied
Access denied