Radzen datagrid black borders on focus

Radzen.Blazor Components
1

Hi
whenever I am using arrow keys to navigate through the grid rows, a black border comes around the grid.
Is there a way to remove this?

2

Although this is not recommended (because of accessibility), you can remove the outline via CSS:

<RadzenDataGrid Style="--rz-grid-focus-outline: none">
3

The black border is still appearing

4

@user3434 please give us some context and steps to reproduce e.g. browser and theme in use, the datagrid config etc. Also, is this reproducible in the online demos when you add Style="--rz-grid-focus-outline: none" via the Edit Source tab in the demo?

5

Yes, It is reproduceable in the online demos as well

Screenshot 2024-09-26 125437
Screenshot 2024-09-26 1254371236×492 59.1 KB

Screenshot 2024-09-26 125456
Screenshot 2024-09-26 1254561353×594 76.3 KB

I've added the style you have provided to this and you can still see the black border in bottom and side parts when navigating through rows using keys

6

Thanks! Managed to reproduce it under Edge. The following style should resolve it until we release a fix:

<style>
    .rz-data-grid-data {
        outline: none;
    }
</style>

You can omit the Style="--rz-grid-focus-outline: none"

1 Like