So i have used RadzenDataGrid, suppose the mouse is focused on certain row and we try to navigate using arrow down or up then the row where mouse is pointing is still focusing so there is a chance that two rows are focused at the same time, how can i remove the mouse focus
how to enable focus on only one row in the grid
Hi @Amrutha_Poojary,
I don't understand what you are trying to achieve. The hover state is displayed when the user hovers a row with the mouse. Focus state is displayed during keyboard navigation.
here the 2nd row is highlighted because mouse points there, where as 6th row is highlighted because of navigating down the datagrid, this seems to be misleading the user on which is the focus row
Hi @Amrutha_Poojary,
You can use the available CSS variables to adjust the styles as you need. For example, to change the focus colors you can use:
<RadzenDataGrid Style="--rz-grid-cell-focus-background-color: var(--rz-primary); --rz-grid-cell-focus-color: var(--rz-on-primary)" ... >
To remove the hover effect, you can try:
<RadzenDataGrid Style="--rz-grid-hover-background-color: none; --rz-grid-hover-color: var(--rz-grid-cell-color);" ... >
how to disable mouse hover when key down?
I'm afraid that is not possible and from a pure UX perspective this is not a good practice - visual feedback from one input device should not interfere with the feedback from another input device.
Agreed on that, but when key is pressed down shouldn't remove hovering state and move the highlight effect on focused state
