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